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

原创
2017/11/15 11:27
阅读数 2.8W

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 解决,这里就不多做分析了,有需要的朋友可以自行查询资料,本文重点讲究的从服务端角度解决跨域问题

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

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

代码

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

My Blog

blog.guijianpan.com

技术交流

展开阅读全文
打赏
0
5 收藏
分享
加载中
更多评论
打赏
0 评论
5 收藏
0
分享
返回顶部
顶部