什么是跨域?怎么解决跨域问题?

什么是跨域?

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。

所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子:

http://www.123.com/index.html 调用 http://www.123.com/server.PHP (非跨域)

http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)

http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)

http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)

请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。

浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。

解决办法:

1、JSONP:

使用方式就不赘述了,但是要注意JSONP只支持GET请求,不支持POST请求。

JSONP原理

ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。

2、代理:

例如www.123.com/index.html需要调用www.456.com/server.php,可以写一个接口www.123.com/server.php,由这个接口在后端去调用www.456.com/server.php并拿到返回值,然后再返回给index.html,这就是一个代理的模式。相当于绕过了浏览器端,自然就不存在跨域问题。

3、PHP端修改header(XHR2方式)

在php接口脚本中加入以下两句即可:

header(‘Access-Control-Allow-Origin:*‘);//允许所有来源访问

header(‘Access-Control-Allow-Method:POST,GET‘);//允许访问的方式

 
时间: 2024-09-30 21:11:55

什么是跨域?怎么解决跨域问题?的相关文章

前后端分离,解决跨域问题及django的csrf跨站请求保护

1. 前后端分离解决跨域问题 解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现: 关于跨域,前端会先发送OPTIONS请求,进行预检,检查后端是否允许前端设置的相应的请求头,请求内容 function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie

阿里P7架构师是如何解决跨域问题的!你有遇到吗?

现在越来越多的项目就算是一个管理后端也偏向于使用前后端分离的部署方式去做,为了顺应时代的潮流,一前后端分离就产生了跨域问题,所以许多同学把跨域和前后端分离项目联系在了一起,其实跨域产生的原因并不是前后端分离导致的,那我们一起来看一下,希望可以靠这一篇文章解答大家所有的跨域问题 一.跨域产生的条件 使用xmlHttpRequest,即我们通常说的ajax请求 浏览器做了这个事 访问的域名不同,即访问的html页面是a域名下的,但内部js发送的ajax请求的目标地址却是b域名 以上三个条件缺一不可,

跨域问题解决方式(HttpClient安全跨域 & jsonp跨域)

1 错误场景 今天要把项目部署到外网的时候,出现了这种问题, 我把两个项目放到自己本机的tomcat下, 进行代码调试, 执行 都没有问题的, 一旦把我须要调用接口的项目B放到其它的server上, 就会报错, 无法通过Ajax调用springMVC的接口, 这是什么原因呢? 当我使用json ajax post请求传递数据的时候在web端出错:XMLHttpRequest cannot loadhttp://ip:8082/security/auth/outside.do. Origin ht

JSONP跨域和CORS跨域的区别

跨域: 由于浏览器中的javascript的同源策略,同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互. 同源:协议,域名,端口,三者有一个不同即为跨域. 解决跨域有以下多种方法,其中最常用被我们熟知的有两种,JSONP和CORS JSONP: 同源策略下,某个服务器下的页面是无法获取该服务器之外的数据的,但是javascript中的image.ifrrame.script等标签是个例外,这些标签可以通过src标签属性请求到其他服务器上的数据,利用script开发策略,我们

前端解决跨域问题的8种方案(最新最全)

原文:http://www.cnblogs.com/JChen666/p/3399951.html 1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.jshttp://www.a.com/b.js 同一域名,不同端

服务器端解决跨域问题的三种方法

跨域是指html文件所在的服务器与ajax请求的服务器是不同的ip+port,例如: - ‘192.168.1.1:8080’ 与 ‘192.168.1.2:8080’是不同的域. - ‘192.168.1.1:8080’ 与 ‘192.168.1.1:8081’是不同的域. 解决此类问题的方法很多,有需要客户端和服务端都要更改的,例如jsonp,iframe等等:有只需要客户端更改的,这种情况只能出现在hybrid app开发中,即通过调用native方法来进行网络请求:有只需要服务端配置的,

web api 解决跨域的问题

web api 总是会遇到跨域的问题,今天我找到了如下方法解决跨域: 1: a:在配置文件中的 加上如下代码 <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers"

前端解决跨域问题的8种方案(最新最全)(转)

1.同源策略如下: URL说明是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js同一域名下允许 http://www.a.com/lab/a.jshttp://www.a.com/script/b.js同一域名下不同文件夹允许 http://www.a.com:8000/a.jshttp://www.a.com/b.js同一域名,不同端口不允许 http://www.a.com/a.jshttps://www.a.com/b.js同一域名,不同协议

HTML5解决跨域问题

HTML5解决跨域问题 由于浏览器的同源策略,网络连接的跨域访问是不被允许的,XHR对象不能直接与非同源的网站处理数据交互.而同源指的是什么呢?同源的范畴包括:规则(协议),主机号(域名.ip等),端口号. 但是随着开放,共享平台的流行,跨域访问的需求愈加强烈.目前最常用的跨域方案是动态加入script标签,这多少有点hack的意味,跨域访问似乎一直没有什么安全且光明正大的办法. 终于,HTML5提供的XMLHttpRequest Level2实现了跨域访问以及其他的一些新功能.下面我们会详细讨

Ajax 是什么?Ajax 的交互模型?同步和异步的区别?如何解决跨域问题

Ajax 是什么: 1. 通过异步模式,提升了用户体验 2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用 3. Ajax 在客户端运行,承担了一部分本来由服务器承担的工作,减少了大用户量下的服务器负载. Ajax 的最大的特点: 1. Ajax可以实现动态不刷新(局部刷新) 2. readyState 属性 状态 有5个可取值: 0 = 未初始化,1 = 启动, 2 = 发送,3 = 接收,4 = 完成 Ajax 同步和异步的区别: 1. 同步:提交请求 -> 等待服务