同源策略

浏览器出于安全考虑，只允许与本域下的接口交互，不同源的客户端脚本在没有明确授权情况下，不能读写对方的资源。请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同。

跨域

浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了，即用一种方法，使a.cn下面的js可以调用b.cn中的js

跨域的解决方法

下面介绍的是经常使用的 JSONP, CORS 方法。

JSONP

原理

• JSONP由两部分组成：回调函数和数据。
• JSONP是通过script标签加载数据的方式去获取数据当作js'代码来执行,提前在页面上声明一个函数,函数名通过接口传参的方式给后台,后台解析到函数名后在原始数据上包裹这个函数名,发送给前端.JSONP需要对应接口的后端的配合才能实现.

示例

首先当前页面中声明一个函数，它为 JSONP 的回调函数,处理作为函数参数传入的数据

1.jpg

不用ajax去请求，把请求地址放到script中,跟后端约定好,后端解析callback这个参数,获取字符串showData,后端返回数据showData({"city":"hangzhou","weather":"晴天"})

2.png
调用showData函数,参数为{"city":"hangzhou","weather":"晴天"}.
3.png

页面成功加载了刚才指定路径的资源后，将会执行该 Javascript 代码，dosomething函数将执行，这时一次跨域请求完成。

CORS

全称是跨域资源共享,是一种ajax跨域请求资源的方式.使用ajax发送请求时,浏览器发现请求不符合同源词略,会给请求加一个请求头,origin,后台进行一系列处理,如确定接受请求,则在返回的结果中加一个响应头:Access-control-Allow-origin,浏览器判断该相响应头中包含origin的值,有则处理响应,即能拿到响应的数据.

response Headers: Access-control-Allow-origin: http://a.com:8080

request Headers: origin:http://a.com:8080

当两者的地址相同,才能得到返回的数据.

与JSONP的比较

• JSONP 只能实现 GET 请求，而 CORS 支持所有类型的 HTTP 请求
• 使用 CORS ，开发者可以是使用普通的 XMLHttpRequest 发起请求和获取数据，比起 JSONP 有更好的错误处理
• 虽然绝大多数现代的浏览器都已经支持 CORS，但是 CORS 的兼容性比不上 JSONP，一些比较老的浏览器只支持 JSONP