nginx 指定多个域名跨域请求配置 find ./ ! -path "./node_modules/*" -name *.js |xargs egrep basePath

引子

一般来说，通过js请求非本站网址的地址会提示跨域问题，如下内容： Failed to load http://www.xxxx.com/xxxx: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.1.200' is therefore not allowed access.

从客户端的角度来说，大家基本上都是用 jsonp 解决，这里就不多做分析了，有需要的朋友可以自行查询资料，本文重点讲究的从服务端角度解决跨域问题

另，若有朋友想直接看最终建议的解决方案，可直接看文章最后面。

一、不做任何限制的跨域请求配置（不建议）

代码

server {
        ... ...

        add_header Access-Control-Allow-Origin *;

        location / {
                if ($request_method = 'OPTIONS') {
                   add_header Access-Control-Allow-Origin *;
                   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
                        return 204;
                }
                 
                ... ...
        }
}

分析

上述配置做法，虽然做到了去除跨域请求控制，但是由于对任何请求来源都不做控制，看起来并不安全，所以不建议使用

二、指定一个域名白名单跨域请求配置（具有局限性）

代码

server {
        ... ...

        add_header Access-Control-Allow-Origin http://127.0.0.1;

        location / {
                if ($request_method = 'OPTIONS') {
                   add_header Access-Control-Allow-Origin http://127.0.0.1;
                   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
                        return 204;
                }
                 
                ... ...
        }
}

分析

上述配置做法，仅局限于 http://127.0.0.1 域名进行跨域访问，假设我使用 http://localhost 请求，尽管都是同一台机器，同一个浏览器，它依旧会提示 No 'Access-Control-Allow-Origin' header is present on the requested resource 。

如果没有特殊要求，使用此种方式已经足够。

三、错误的指定多个域名白名单跨域请求配置（不成功）

代码

server {
        ... ...

        add_header Access-Control-Allow-Origin 'http://127.0.0.1, http://locahost';

        location / {
                if ($request_method = 'OPTIONS') {
                   add_header Access-Control-Allow-Origin 'http://127.0.0.1, http://locahost';
                   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
                        return 204;
                }
                 
                ... ...
        }
}

分析

可能有朋友已经想到了，既然可以配置一个，肯定也可以配置多个，在后面加上逗号继续操作即可，那么最终配置结果就是上述代码，当应用到项目中，会发现报错，提示：The 'Access-Control-Allow-Origin' header contains multiple values 'http://127.0.0.1, http://localhost', but only one is allowed. Origin 'http://127.0.0.1:9000' is therefore not allowed access.

查了资料，基本上意思就是说只能配置一个，不能配置多个。

这个就尴尬了，怎么配置多个呢？请读者继续往下看。

三、通过设置变量值解决指定多个域名白名单跨域请求配置（建议使用）

代码

server {
        ... ...

        set $cors_origin "";
        if ($http_origin ~* "^http://127.0.0.1$") {
                set $cors_origin $http_origin;
        }
        if ($http_origin ~* "^http://localhost$") {
                set $cors_origin $http_origin;
        }
        add_header Access-Control-Allow-Origin $cors_origin;

        location / {
                if ($request_method = 'OPTIONS') {
                   add_header Access-Control-Allow-Origin $cors_origin;
                   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
                        return 204;
                }
                 
                ... ...
        }
}

分析

设置一个变量 $cors_origin 来存储需要跨域的白名单，通过正则判断，若是白名单列表，则设置 $cors_origin 值为对应的域名，则做到了多域名跨域白名单功能。