一、 什么是跨域问题?
跨域是指浏览器不能执行其他网站的脚本,他是由浏览器的同源策略导致的,是浏览器对JavaScript施加的安全限制。
所谓同源是指,协议、域名和端口号均相同。
注意:localhost与127.0.0.1虽说都代表本机,但是也非同源。
二、解决跨域问题的方法
1.jsonp(json padding)
jsonp利用<script>标签的没有跨域限制的漏洞,来达到与第三方通讯的目的。
当需要与第三方通讯时,在本站创建一个<script>元素,地址指向第三方API,并创建一个回调函数,当返回结果时,调用该回调函数,处理返回结果。回调函数名称可通过地址参数告知,也可双方事先约定。返回结果形如:
callback({“name”:”li”,”age”:18})
2.cors(跨域资源共享)
cors定义了在访问跨域资源时,浏览器与服务器之间如何沟通。基本思想是使用自定义的头部来让浏览器和服务器之间进行沟通,从而决定请求或响应是应该成功或者失败。
- 不会触发CORS预检请求的情况:
- 请求类型为GET、POST、HEAD
- 当发送POST请求时,仅当Content-Type值等于下列之一:
text/plain
multipart/form-data
application/x-www-form-urlencoded
触发CORS预检请求的情况
- 请求类型为DELETE、OPTIONS、 TRACE 、PUT、 CONNECT 、PATCH
认为设置了cors安全首部字段集合之外的其他首部字段。
- cors安全首部字段集合为:
- Accept
- Accept-Language
- Content-Language
- Content-Type (but note the additional requirements below)
- DPR
- Downlink
- Save-Data
- Viewport-Width
- Width
- cors安全首部字段集合为:
Content-Type 的值不属于下列之一:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
总结:
jsonp与cors的区别:
1.请求类别
jsonp只支持GET请求,cors支持所有类型的请求方式
2.浏览器版本
jsonp支持较老版本的浏览器,cors支持绝大多数的现有浏览器
3.发送请求
cors可以使用普通的XHR发送请求和获取数据,与jsonp相比,有更好的错误处理机制。
jsonp只支持跨域http请求,不能解决不同域的两个页面之间JavaScript进行调用的问题。
4.同源策略限制
jsonp不受同源策略限制,兼容性更好
CORS在进行ajax请求时,为了兼容IE浏览器,还需创建ActiveX对象。