跨域资源共享 CORS

110 阅读 0 评论 73 点赞

我是靠谱客的博主传统龙猫，最近开发中收集的这篇文章主要介绍跨域资源共享 CORS，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

突然发现同一个域名不如果是a.xxx.com b.xxx.com 或者 a-1.xxx.com b-1.xxx.com是不跨域的
但a.1.xxx.com 和b.1.xxx.com不跨域

最近做前后端分离项目，总是出现前端请求跨域的报错。

仔细搜索了网站和各种解决方法：
一种是服务器端解决，一种是程序解决。
本文的都是服务器解决方法

记录下来以备后用，如果能帮助到一个人更好。

一、CORS概述

跨源资源共享标准通过新增一系列 HTTP 头，让服务器能声明那些来源可以通过浏览器访问该服务器上的各类资源（包括CSS、图片、JavaScript 脚本以及其它类资源）。另外，对那些会对服务器数据造成破坏性影响的 HTTP 请求方法（特别是 GET 以外的 HTTP 方法，或者搭配某些MIME类型的POST请求），标准强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request)，从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下，以实际的 HTTP 请求方法发送那个真正的请求。服务器端也可以通知客户端，是不是需要随同请求一起发送信用信息（包括 Cookies 和 HTTP 认证相关数据）。

二、CORS原理

例如：域名A(http://a.example)的某 Web 应用程序中通过标签引入了域名B(http://b.foo)站点的某图片资源(http://b.foo/image.jpg)。这就是一个跨域请求，请求http报头包含Origin: http://a.example，如果返回的http报头包含响应头 Access-Control-Allow-Origin: http://a.example （或者Access-Control-Allow-Origin: http://a.example），表示域名B接受域名B下的请求，那么这个图片就运行被加载。否则表示拒绝接受请求。

三、CORS跨域请求控制方法

其他的不拷贝了。
有写的非常棒的介绍了。

跨域资源共享 CORS 详解—阮一峰
https://www.ruanyifeng.com/blog/2016/04/cors.html
HTTP访问控制（CORS）
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

代码端解决跨域问题

PHP
MDN的介绍
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Server-Side_Access_Control

服务端解决以nginx为例

如果针对单域名

在location端
add_header Access-Control-Allow-Origin http://xxx.xxxx.com;

location / {
        proxy_set_header    X-Real-IP        $remote_addr;
        proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header    HTTP_X_FORWARDED_FOR $remote_addr;
            #判断查询请求所允许的host&header&请求方法是否合法
            if ($request_method = 'OPTIONS') {
                    add_header Access-Control-Allow-Origin  http://xxx.xxxx.com;
                    add_header Access-Control-Allow-Headers uuid,Authorization;
                    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
                    return 204;
            }
            try_files $uri $uri/ /index.php?$query_string;
    }

多个域名

在主配置中配置map变量

map $http_origin $cors_origin {
    default 0;
    "~http://a1.xxx.com" http://a1-test.xxx.com;
    "~http://a1-test.xxx.com" http://a1-test.xxx.com;
}

在location段用
注意：$cors_origin

location / {
        proxy_set_header    X-Real-IP        $remote_addr;
        proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header    HTTP_X_FORWARDED_FOR $remote_addr;
            #判断查询请求所允许的host&header&请求方法是否合法
            if ($request_method = 'OPTIONS') {
                    add_header Access-Control-Allow-Origin  $cors_origin;
                    add_header Access-Control-Allow-Headers uuid,Authorization;
                    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
                    return 204;
            }
            try_files $uri $uri/ /index.php?$query_string;
    }