Nginx跨域解决方案(nginx跨域配置详解)

Nginx跨域解决方案

推荐整理分享Nginx跨域解决方案(nginx跨域配置详解)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:nginx 解决跨域,nginx 解决跨域,nginx解决跨域的常用方案,nginx 跨域,nginx解决跨域问题原理,nginx跨域解决方案 8082,nginx 解决跨域,nginx 解决跨域,内容如对您有帮助，希望把文章链接给更多的朋友！

前置条件： 前端网站地址：http://localhost:4443 服务端网址：http://localhost:9081

当网站8080访问服务端接口的时候会产生跨域的问题

跨域主要设计到4个响应头:

Access-Control-Allow-Origin 用于设置允许跨域请求源地址 （预检请求和正式请求在跨域时候都会验证）Access-Control-Allow-Headers 跨域允许携带的特殊头信息字段 （只在预检请求验证）Access-Control-Allow-Methods 跨域允许的请求方法或者说HTTP动词 （只在预检请求验证）Access-Control-Allow-Credentials 是否允许跨域使用cookies，如果要跨域使用cookies，可以添加上此请求响应头，值设为true（设置或者不设置，都不会影响请求发送，只会影响在跨域时候是否要携带cookies，但是如果设置，预检请求和正式请求都需要设置）。不过不建议跨域使用，除非必要，因为有很多方案可以代替。

跨域请求时会先发送预检请求，浏览器首先会询问服务器，当前网页所在的域名是否在服务器的许可列表中，以及可以使用的请求头和请求方法。若得到肯定的答复，才会发送正式请求Xhr请求，否则报错

报错情况1

Access to XMLHttpRequest at ‘http://localhost:9081/api/’ from origin ‘http://localhost:4443’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No > ‘Access-Control-Allow-Origin’ header is present on the requested resource.

通过错误信息可以很清晰的定位到错误priflight说明是个预请求，CORS 机制跨域会首先进行 preflight（一个 OPTIONS 请求）， 该请求成功后才会发送真正的请求。这一设计旨在确保服务器对 CORS 标准知情，以保护不支持 CORS 的旧服务器

解决方案：

server { listen 8080; server_name localhost; location / { add_header Access-Control-Allow-Origin 'http://localhost:4443'; proxy_pass http://localhost:9081; }}

报错情况2

Access to XMLHttpRequest at ‘http://localhost:9081/api/’ from origin ‘http://localhost:4443’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

通过报错信息提示可以得知，是跨域浏览器默认行为的预请求（option请求）没有收到ok状态码，此时再修改配置文件，当请求为option请求时候，给浏览器返回一个状态码（一般是204）

如果想要每次响应信息都携带头字段信息，需要在最后添加always（经我测试，只有Access-Control-Allow-Origin这个头信息需要加always，其他的不加always也会携带回来）

server { listen 8080; server_name localhost; location / { add_header Access-Control-Allow-Origin 'http://localhost:4443' always; if ($request_method = 'OPTIONS') { return 204; } proxy_pass http://localhost:9081; }}

报错情况3

Access to XMLHttpRequest at ‘http://localhost:9081/api/’ from origin ‘http://localhost:4443’ has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response. 意思就是预请求响应头Access-Control-Allow-Headers中缺少头信息（各种情况会不一样，在发生跨域后，在自定义添加的头信息是不允许的，需要添加到请求响应头Access-Control-Allow-Headers中，以便浏览器知道此头信息的携带是服务器承认合法的）

server { listen 8080; server_name localhost; location / { add_header Access-Control-Allow-Origin 'http://localhost:4443' always; if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Headers '*'; #为什么写在if里面而不是接着Access-Control-Allow-Origin往下写？因为这里只有预检请求才会检查 return 204; } proxy_pass http://localhost:9081; }}

报错情况4 如果`if ($request_method = ‘OPTIONS’)``中配置了add_header，那么预检请求外部配置均会失效 官方文档

There could be several add_header directives. These directives are inherited from the previous level if and only if there are no add_header directives defined on the current level.

意思就是当前层级无 add_header 指令时，则继承上一层级的add_header。相反的若当前层级有了add_header，就应该无法继承上一层的add_header。

server { listen 8080; server_name localhost; location / { add_header Access-Control-Allow-Origin 'http://localhost:4443' always; if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin 'http://localhost:4443'; add_header Access-Control-Allow-Headers '*'; #为什么写在if里面而不是接着Access-Control-Allow-Origin往下写？因为这里只有预检请求才会检查 return 204; } proxy_pass http://localhost:9081; }}

但是由于此写法携带上两个 Access-Control-Allow-Origin ，这种情况也是不允许的 因此修正过的配置如下（其中*可以根据自己的需求替换）

server { listen 8080; server_name localhost; location / { if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin 'http://localhost:4443'; add_header Access-Control-Allow-Headers '*'; #为什么写在if里面？因为这里只有预检请求才会检查 add_header Access-Control-Allow-Methods '*'; add_header Access-Control-Allow-Credentials 'true'; return 204; } if ($request_method != 'OPTIONS') { add_header Access-Control-Allow-Origin 'http://localhost:4443' always; add_header Access-Control-Allow-Credentials 'true'; } proxy_pass http://localhost:9081; }}

或者

server { listen 8080; server_name localhost; location / { add_header Access-Control-Allow-Origin 'http://localhost:4443' always; add_header Access-Control-Allow-Headers '*'; add_header Access-Control-Allow-Methods '*'; add_header Access-Control-Allow-Credentials 'true'; if ($request_method = 'OPTIONS') { return 204; } proxy_pass http://localhost:9081; }}

参考文章：Nginx 轻松解决跨域问题