服务器 响应头设置跨域,服务端 跨域问题的解决

原标题：服务端 跨域问题的解决

技术哥,给你不一样的世界

什么是跨域

什么是跨域请求？

当一个资源向与本身所在服务器不同的域或者端口发起请求时，会发起一个跨域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的验证身份对于跨域 请求来说，浏览器并不会发送对应的身份凭证信息，如果需要带上身份凭证的请求，需要做额外的设置，以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服务器创建的信息，它提供了服务器和客户配置及当前请求环境的有关信息。)获取请求域的信息。

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

进一步了解请持续关注技术哥

微信公众号：技术哥

技术哥，给你不一样的世界！返回搜狐，查看更多

责任编辑：