Nginx跨域解决方案

跨域限制访问，即为浏览器禁止访问其他网站的资源，是浏览器的限制。如果缺少了同源策略，网页很容易受到XSS、CSFR等攻击。

同源策略是Web应用程序安全性模型中的重要概念。根据该策略，Web浏览器允许第一个网页中包含的脚本访问第二个网页中的数据，但前提是两个网页具有相同的来源。来源由URI，主机名(hostname) 和端口号(port) 的组合定义。此策略可防止一个页面上的恶意脚本通过该页面的DOM(Document Object Model)获得对另一网页上敏感数据的访问。

CORS

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器，它允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。

跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是GET以外的 HTTP 请求，或者搭配某些 MIME 类型的POST请求），浏览器必须首先使用OPTIONS方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括Cookies和 HTTP 认证相关数据）。

简单请求

某些请求不会触发 CORS 预检请求，可称这样的请求为“简单请求”。

请注意，该术语并不属于 Fetch （其中定义了 CORS）规范。

使用下列方法之一：GET、HEAD、POST
Content-Type的值仅限于下列三者之一：text/plain、multipart/form-data、application/x-www-form-urlencoded
…

所有简单请求见MDN 简单请求

预检请求（preflight request）

与前述简单请求不同，需预检的请求要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。”预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。

对于附带身份凭证的请求，服务器不得设置Access-Control-Allow-Origin的值为“*”，需设置为具体的域名，否则请求会失败。

Nginx跨域配置

NGINX是一个免费的，开源的高性能HTTP服务器和反向代理，以及IMAP / POP3代理服务器。NGINX以其高性能，稳定性，丰富的功能集，简单的配置和低资源消耗而闻名。

通常在nginx下设置通用配置，以解决域名下的跨域问题

简单请求跨域配置

Access-Control-Allow-Origin: *.test.com
Access-Control-Allow-Credentials: true

预检请求过程

当需要支持跨域的请求不是简单请求时，需特殊处理预检请求所发起的OPTIONS请求

set $cors '';
if ($http_origin ~* 'https?://(localhost|www\.example\.com|m\.example\.com)') {
        set $cors 'true';
}

if ($cors = 'true') {
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Mx-ReqToken,X-Requested-With';
}

if ($request_method = 'OPTIONS') {
        return 204;
}

下图为，以真实请求的HTTP方法及请求首部字段发起对应的预检请求

参考资料：

HTTP访问控制（CORS）

CrossOrigin