nginx 跨域设置

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

支持跨域

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

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

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

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

携带凭据的跨域

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

支持多域名跨域

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

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

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