如何使用CORS解决跨域问题

什么是跨域

什么是跨域请求？

当一个资源向与自己所在服务器不一样的域或者端口发起请求时，会发起一个跨域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服务器建立的信息，它提供了服务器和客户配置及当前请求环境的有关信息。）获取请求域的信息。