Nginx 跨域解决方案

简介: 跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器,它允许 Web 应用服务器进行跨域访问控制,从而使跨域数据传输得以安全进行。跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是GET以外的 HTTP 请求

跨域限制访问,即为浏览器禁止访问其他网站的资源,是浏览器的限制。如果缺少了同源策略,网页很容易受到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)规范。

  • 使用下列方法之一:GETHEADPOST
  • Content-Type的值仅限于下列三者之一:text/plainmultipart/form-dataapplication/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方法及请求首部字段发起对应的预检请求


参考资料:

  1. HTTP访问控制(CORS)
相关文章
|
6月前
|
应用服务中间件 网络安全 nginx
【Nginx】Nginx启动显示80端口占用问题的解决方案
【Nginx】Nginx启动显示80端口占用问题的解决方案
1189 1
|
6月前
|
前端开发 Java 应用服务中间件
解决跨域问题的8种方法,含网关、Nginx和SpringBoot~
解决跨域问题的8种方法,含网关、Nginx和SpringBoot~
682 0
解决跨域问题的8种方法,含网关、Nginx和SpringBoot~
|
6月前
|
前端开发 应用服务中间件 Linux
nginx解决springcloud前后端跨域问题,同时配置ssl
nginx解决springcloud前后端跨域问题,同时配置ssl
119 0
|
5月前
|
应用服务中间件 nginx
Nginx 出现403 Forbidden 的几种解决方案【已解决】
Nginx 出现403 Forbidden 的几种解决方案【已解决】
6185 3
|
1月前
|
缓存 前端开发 应用服务中间件
CORS跨域+Nginx配置、Apache配置
CORS跨域+Nginx配置、Apache配置
131 7
|
3月前
|
缓存 安全 应用服务中间件
Nginx:关于实现跨域代理
Nginx:关于实现跨域代理
553 1
|
4月前
|
存储 缓存 前端开发
(三)Nginx一网打尽:动静分离、压缩、缓存、黑白名单、跨域、高可用、性能优化...想要的这都有!
早期的业务都是基于单体节点部署,由于前期访问流量不大,因此单体结构也可满足需求,但随着业务增长,流量也越来越大,那么最终单台服务器受到的访问压力也会逐步增高。时间一长,单台服务器性能无法跟上业务增长,就会造成线上频繁宕机的现象发生,最终导致系统瘫痪无法继续处理用户的请求。
139 1
|
4月前
|
JavaScript 应用服务中间件 nginx
【项目部署系列教程】5. nginx配置反向代理,解决跨域接口的访问
【项目部署系列教程】5. nginx配置反向代理,解决跨域接口的访问
207 10
|
6月前
|
JSON JavaScript 前端开发
vue2_vite.config.js的proxy跨域配置和nginx配置代理有啥区别?
vue2_vite.config.js的proxy跨域配置和nginx配置代理有啥区别?
216 1
|
6月前
|
前端开发 Java 应用服务中间件
Springboot解决跨域问题方案总结(包括Nginx,Gateway网关等)
Springboot解决跨域问题方案总结(包括Nginx,Gateway网关等)