跨域限制访问,即为浏览器禁止访问其他网站的资源,是浏览器的限制。如果缺少了同源策略,网页很容易受到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方法及请求首部字段发起对应的预检请求
参考资料: