如何使用CORS解决跨域问题

原创文章，转载请注明：转载自技术哥

微信订阅号：技术哥

技术哥

给你不一样的世界

---

image

什么是跨域

什么是跨域请求？

当一个资源向与本身所在服务器不同的域或者端口发起请求时，会发起一个跨域HTTP请求。

为什么有跨域限制？

跨域资源共享（CORS即Cross Origin Resource Sharing）机制允许Web服务器进行跨域访问控制，从而可以安全地进行跨域访问，览器支持在 API 容器中使用 CORS，以降低跨域 HTTP 请求所带来的风险。

---

CORS分成简单请求和复杂请求

简单请求大致满足以下条件：

使用下列方法之一：

1. GET

2. HEAD

3. POST

HTTP头不超过以下字段：

1. Accept

2. Accept-Language

3. Content-Language

4. DPR

5. Downlink

6. Save-Data

7. Viewport-Width

8. Width

其中Content-Type 只能为以下之一：

1. text/plain

2. multipart/form-data

3. application/x-www-form-urlencoded

如不满足以上条件，都可以视为复杂请求。

若服务器不能响应跨域请求，则需要在服务端带上Access-Control-Allow-Origin的响应头，以PHP为例：

header('Access-Control-Allow-Origin:*']);

其中“ * ”表示该数据对任何人可见，如果只希望特定的地址访问，可以把*改为对应的地址

复杂请求会先发送一个预请求，该请求以OPTIONS方法发起，预请求会对服务器进行检测，以获取服务器是否允许该请求，预请求可以避免跨域请求对服务器产生的未知影响。

当进行复杂请求时需要对服务端进行设置，以PHP为例：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-  Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");

其中Access-Control-Allow-Method表示预请求后所允许的请求方式，Access-Control-Allow-Headers表示预请求后所允许的响应头，如果预请求成功，就可以进行实际请求。

---

附带身份凭证的跨域请求

一般基于HTTP cookies的验证身份对于跨域 XMLHttpRequest请求来说，浏览器并不会发送对应的身份凭证信息，如果需要带上身份凭证的XMLHttpRequest请求，需要做额外的设置，以PHP为例：

header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
header('Access-Control-Allow-Methods:GET,POST, PUT,DELETE,OPTIONS,PATCH');

前端则需要将withCredentials设置为true，从而向服务器发送cookies，服务端则需要设置Access-Control-Allow-Credentials:true来把响应内容返回请求者，由于withCredentials：true与Access-Control-Allow-Origin:*不能同时存在，所以需要从$_SERVER（PHP超级全局变量，包含由web服务器创建的信息，它提供了服务器和客户配置及当前请求环境的有关信息。）获取请求域的信息。

---

本文为我们曾经遇到的问题，现整理成为笔记分享给大家，希望对面对同样问题的朋友有所帮助。

---

往期回顾
区块链教程 | 快速入门
web前端 | vue.js系列教程2
web前端 | vue.js环境搭建
服务端 | 如何实现物联网后台
服务器 | 9.9元搭建服务器

---

关注“技术哥”的微信公众号查看更多技术文章