Nginx轻松搞定跨域请求
一、跨域问题产生的原因
产生跨域问题的主要原因就在于同源策略,为了保证用户信息安全,防止恶意网站窃取数据,同源策略是必须的,否则cookie可以共享。由于http无状态协议通常会借助cookie来实现有状态的信息记录,例如用户的身份/密码等,因此一旦cookie被共享,那么会导致用户的身份信息被盗取。
同源策略主要是指三点相同,协议+域名+端口 相同的两个请求,则可以被看做是同源的,但如果其中任意一点存在不同,则代表是两个不同源的请求,同源策略会限制了不同源之间的资源交互。
二、解决方案
只需要在Nginx的配置文件nginx.conf中配置如下即可。
location ^~ / {
# cors start
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST';
add_header 'Access-Control-Allow-Headers' *;
if ($request_method = 'OPTIONS') {
return 204;
}
# cors end
proxy_pass http://www.example.com;
}
三、解释说明
# 允许跨域的请求,*表示所有,不是太友好,可以自定义变量$http_origin,这个后面会介绍到。
add_header 'Access-Control-Allow-Origin' *;
# 允许携带cookie请求
add_header 'Access-Control-Allow-Credentials' 'true';
# 允许跨域请求的方法:GET,POST
add_header 'Access-Control-Allow-Methods' 'GET,POST';
# 允许请求时携带的头部信息,*表示所有
add_header 'Access-Control-Allow-Headers' *;
# 在发送跨域请求前,会以Options方式发送预检请求,服务器接受时才会正式请求
if ($request_method = 'OPTIONS') {
return 204;
}
预检请求
上面的配置其实涉及到了一个W3C标准:CROS,全称是跨域资源共享 (Cross-origin resource sharing),它的提出就是为了解决跨域请求的。
- 跨域资源共享(CORS)标准新增了一组 HTTP头部字段,允许服务器声明哪些源站有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生副作用的HTTP 请求方法(特别是 GET以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。
四、相对友好的解决方案(推荐)
location ^~ / {
# cors start
set $cors_origin "";
if ($http_origin ~* "^http(s)?://.*\.example\.com$") {
set $cors_origin $http_origin;
}
add_header 'Access-Control-Allow-Origin' $cors_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST';
add_header 'Access-Control-Allow-Headers' *;
if ($request_method = 'OPTIONS') {
return 204;
}
# cors end
proxy_pass http://www.example.com;
}
通过自定义变量$cors_origin 可以有效解决Access-Control-Allow-Origin * 的问题。
可以根据自身情况进行调整配置,希望对你有所帮助!