Nginx轻松搞定跨域请求

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 * 的问题。

可以根据自身情况进行调整配置，希望对你有所帮助！