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

asfx站长

2020.07.14 15:53:34 阅读 1299

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

##### 这里介绍一种方案从服务端角度（Nginx配置）解决跨域问题

### 一、不做任何限制的跨域请求配置（不建议）
```
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 {
        ... ...

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

####注意：以上如果在自己本地开发环境下带端口的话需要在上面的配置ip后面再加上:端口号，或者在本机hosts文件配置ip到ip:端口也可以。