nginx跨域html配置,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