本篇主要总结CORS,另外两种解决方案详解见阮一峰大佬
浏览器同源政策及其规避方法
| 如何解决跨域
- CORS
- Websocket
- JSONP
| 本篇主要总结CORS
CORS(Cross-origin resource sharing)是一个w3c标准,全称为跨域资源共享。
该机制通过允许服务器标示除了它自己以外的其它origin(域,协议和端口),这样浏览器可以访问加载这些资源
用来克服ajax同源限制
- 需要浏览器和服务器(关键)同时支持,IE不低于IE10
- CORS通信与同源的AJAX通信没有差别,代码完全一样
- 实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
流程图
CORS两种请求
- 简单请求
- 非简单请求
1.简单请求
满足以下两大条件即为简单请求
// 条件1
请求方法是
- HEAD
- GET
- POST
// 条件2
HTTP头信息不超过以下字段
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type:
// 只限于三个值
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
Example
① 浏览器发送请求,在请求头中的origin字段告诉服务器我来自哪里
② 服务器会根据设置是否允许请求头的
origin地址来判断是否返回正确数据
Access-Control-Allow-Origin字段为允许跨域请求的源,可以在响应头看到服务器允许所有(*)地址请求
2.非简单请求
不满足以上条件的就是非简单请求
非简单请求的CORS请求首先要进行预检请求
如果服务器通过会响应有Access-Control-Allow-* 字段,说明成功
注意:Access-Control-Allow-Origin字段是必包含的
预检失败