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

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

---

参考资料：

• 跨域踩坑经验总结（内涵：跨域知识科普） - 凝雨 - Yun
• 使用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;
    }

    # 下方为其它配置...
}