nginx 指定多个域名跨域请求配置

引子

通常来讲，经过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 解决，这里就很少作分析了，有须要的朋友能够自行查询资料，本文重点讲究的从服务端角度解决跨域问题

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

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

代码

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;
                }
                 
                ... ...
        }
}

分析

上述配置作法，虽然作到了去除跨域请求控制，可是因为对任何请求来源都不作控制，看起来并不安全，因此不建议使用

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

代码

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 。

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

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

代码

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.

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

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

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

代码

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 值为对应的域名，则作到了多域名跨域白名单功能。

My Blog

blog.guijianpan.com

技术交流