码迷,mamicode.com
首页 > 其他好文 > 详细

什么是跨域?如何实现跨域?

时间:2018-03-10 18:47:31      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:ext   方法   方式   attr   客户   max-age   xmlhttp   ping   出现   

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

使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题.

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

如何实现跨域?(以下是常用,我自己项目使用到的)

1、JSONP:

利用<script>标签没有跨域限制的“漏洞”,来达到与第三方通讯的目的。当需要通讯时,本站脚本动态创建一个<script>元素,地址指向第三方的API网址,形如:
<script src="http://www.example.net/api?param1=1&param2=2"></script>
并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。
第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如:
callback({"name":"hax","gender":"Male"})
这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

所有,通过Chrome查看所有JSONP发送的Get请求都是js类型,而非XHR。

要注意JSONP只支持GET请求,不支持POST请求。

2、apache设置反向代理(设置url映射解决跨域):

技术分享图片

 

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

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

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

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

4.cors

? Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,确保安全的跨域数据传输。现代浏览器使用CORS在API容器如XMLHttpRequest来减少HTTP请求的风险来源。与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。服务器一般需要增加如下响应头的一种或几种:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

 

跨域请求默认不会携带Cookie信息,如果需要携带,请配置下述参数:

"Access-Control-Allow-Credentials": true
// Ajax设置
"withCredentials": true

 

什么是跨域?如何实现跨域?

标签:ext   方法   方式   attr   客户   max-age   xmlhttp   ping   出现   

原文地址:https://www.cnblogs.com/ccnNL/p/8541225.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!