CORS跨域解决方案

424 阅读2分钟

本篇主要总结CORS,另外两种解决方案详解见阮一峰大佬
浏览器同源政策及其规避方法

| 如何解决跨域

  • CORS
  • Websocket
  • JSONP image.png

| 本篇主要总结CORS

CORS(Cross-origin resource sharing)是一个w3c标准,全称为跨域资源共享
该机制通过允许服务器标示除了它自己以外的其它origin(域,协议和端口),这样浏览器可以访问加载这些资源
用来克服ajax同源限制

  • 需要浏览器和服务器(关键)同时支持,IE不低于IE10
  • CORS通信与同源的AJAX通信没有差别,代码完全一样
  • 实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

流程图

image.png

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字段告诉服务器我来自哪里 image.png ② 服务器会根据设置是否允许请求头的origin地址来判断是否返回正确数据
Access-Control-Allow-Origin字段为允许跨域请求的源,可以在响应头看到服务器允许所有(*)地址请求
image.png

2.非简单请求

不满足以上条件的就是非简单请求

非简单请求的CORS请求首先要进行预检请求
如果服务器通过会响应有Access-Control-Allow-* 字段,说明成功 image.png
注意:Access-Control-Allow-Origin字段是必包含的

预检失败
image.png

| 参考资料

浏览器同源政策及其规避方法
跨域资源共享 CORS 详解