首页 > 编程知识 正文

nginx解决跨域的常用方案,nginx解决前端跨域问题

时间:2023-05-04 06:16:50 阅读:203684 作者:506

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

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。