0%

nginx 跨域设置

我们常碰见的是前端去请求后端资源时候的跨域,这时候需要在后端服务里加上允许跨域的请求头即可。但是现在有一个需求,我一个前端资源需要去请求另一个资源,比如是一个图床,这个图床很简单,只配置了一个域名来访问,没有涉及到后端服务,现在遇到这个跨域问题我们怎么办?

支持跨域

其实原理是一样的,需要解决跨域问题我们要门在前端做代理,要么在服务器端添加允许跨域的头部信息。

但我们现在没有涉及到后端服务,所以我们需要在nginx里来做设置。在nginx配置文件/etc/ngin/nginx.conf中这个域名配置的location下面添加上我们的跨域访问的头部信息:

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
# .... 其他配置

location / {
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT, X-Mx-ReqToken, Keep-Alive, User-Agent, X-Requested-With';
if ($request_method = 'OPTIONS') {
return 204;
}
# ... 其他配置
}
}

保存后,让nginx重新加载配置:

1
nginx -s reload

再次访问,即可发现可以正常访问了,跨域解决。

携带凭据的跨域

在请求头中有字段cookiesauthorization或TLS 客户端证书时,服务端需要返回Access-Control-Allow-Credentialstrue才可以正确处理响应,否则也会出现跨域错误。

支持多域名跨域

假设我们的服务端需要支持多个域名的跨域,那怎么设置?

我们前面设置的Access-Control-Allow-Origin*,当设置携带凭据跨域的字段为true时,是不允许将Access-Control-Allow-Origin设置为*的。但是要将这个字段设置为指定域名的话,又只能指定一个,不能多个,我们需要做点操作才可以:

1
2
3
4
5
6
7
8
9
localtion / {
set $cors_origin "";
if ($http_origin ~* "^http://loaclhost:3000$") {
set $cors_origin $http_origin;
}
# 其他域名可以仿照上面的域名来设置
add_header 'Access-Control-Allow-Origin' $cors_origin;
# ... 其他设置
}