位置: IT常识 - 正文
Nginx跨域解决方案(nginx跨域配置详解)
编辑：rootadmin推荐整理分享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 轻松解决跨域问题
上一篇：缺陷修改实践——replace函数的运用|思考？(缺陷修饰)
下一篇：【pytorch】有关nn.EMBEDDING的简单介绍(pytorch nn.parameters)
