Nginx 解决 CORS 跨域问题，包括自定义 Header 问题

朴灿烈づ我的快乐病毒、 2021-09-19 07:38 558阅读 0赞

**这问题简直像恶魔一样特喵的~喵喵喵**?

--------------------

参考资料：

*  [跨域踩坑经验总结（内涵：跨域知识科普） - 凝雨 - Yun][- _ - Yun]
 *  [使用Vue的axios vue-resource跨域不成功 但原生xhr就可以 - SegmentFault 思否][Vue_axios vue-resource_ _xhr_ - SegmentFault]

**前后端分离项目**

假设现在前端地址为：`b.example.com`；接口地址为 `api.example.com`，且 Nginx 对应配置已搞妥。

编辑 `api.example.com` 地址的配置文件：

server { 
        # 上方是该 Server 相关的端口、root 路径、index 一类设置
        # 这儿设置默认请求允许跨域（建议发布环境指定域名而不是“星”号，如 http://b.example.com）
        add_header Access-Control-Allow-Origin '*';
    
        location / { 
            # 强制 HTTPS 跳转，不需要直接移除
            #if ($scheme = http) { 
            # return 301 https://$host$request_uri;
            #}
    
            # 根据 SF 里面大佬的解释，如果请求不是 GET 或者特定 POST（指定 Content-Type）时，
            # 浏览器会以 OPTIONS 方式发送一个预请求，
            # 所以在预请求的响应阶段，我们得允许跨域的相关操作
            if ($request_method = 'OPTIONS') { 
                # 【必须】，同上说明，建议在发布环境用域名而不是“星”号
                add_header Access-Control-Allow-Origin '*';
                # Allow-Headers 指定允许的自定义请求头，如用户 Token
                add_header Access-Control-Allow-Headers 'App-Token';
                # 经过我的实验这个可以不加（有需要另说）
                # 一般来说在 POST 请求时因为 Content-Type 的原因在本次 OPTIONS 预请求后，
                # 会再发送的 POST 请求，而 POST 请求是可以正常接收的
                add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, PATCH, OPTIONS';
                # 请求是否携带 Cookie，无需要可忽略。有说该设置为 true 时 Allow-Origin 不可为 '*'
                add_header Access-Control-Allow-Credentials true;
                # 这个响应 Content-Type 也是根据需要设置（一般情况可以不用设置）
                add_header Content-Type 'application/json; charset=utf-8';
                # 如下 Content-Length 可忽略，返回状态码根据个人习惯可设置为 200
                add_header Content-Length 0;
                return 204;
            }
    
            # 因使用 Laravel/Lumen 框架，所以有这句，请删掉不用在意...
            try_files $uri $uri/ /index.php?$query_string;
        }
    
        # 下方为其它配置...
    }

[- _ - Yun]: https://ningyu1.github.io/site/post/92-cors-ajax/
[Vue_axios vue-resource_ _xhr_ - SegmentFault]: https://segmentfault.com/q/1010000008292792/a-1020000008294794