解决你的 Nginx 代理跨域问题详细完整版

当你遇到跨域问题，不要立刻就选择复制去尝试。请详细看完这篇文章再处理 。我相信它能帮到你。

分析前准备：

前端网站地址：http://localhost:8080

服务端网址：http://localhost:59200 

首先保证服务端是没有处理跨域的，其次，先用postman测试服务端接口是正常的

当网站8080去访问服务端接口时，就产生了跨域问题，那么如何解决？接下来我把跨域遇到的各种情况都列举出来并通过nginx代理的方式解决（后台也是一样的，只要你理解的原理）。

跨域主要涉及4个响应头：

Access-Control-Allow-Origin 用于设置允许跨域请求源地址 （预检请求和正式请求在跨域时候都会验证）

Access-Control-Allow-Headers 跨域允许携带的特殊头信息字段 （只在预检请求验证）

Access-Control-Allow-Methods 跨域允许的请求方法或者说HTTP动词 （只在预检请求验证）

Access-Control-Allow-Credentials 是否允许跨域使用cookies，如果要跨域使用cookies，可以添加上此请求响应头，值设为true（设置或者不设置，都不会影响请求发送，只会影响在跨域时候是否要携带cookies，但是如果设置，预检请求和正式请求都需要设置）。不过不建议跨域使用（项目中用到过，不过不稳定，有些浏览器带不过去），除非必要，因为有很多方案可以代替。

网上很多文章都是告诉你直接Nginx添加这几个响应头信息就能解决跨域，当然大部分情况是能解决，但是我相信还是有很多情况，明明配置上了，也同样会报跨域问题。

什么是预检请求？：当发生跨域条件时候，览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。如下图

开始动手模拟：

Nginx代理端口：22222 ,配置如

server {
        listen       22222;
        server_name  localhost;
        location  / {
            proxy_pass  http://localhost:59200;
        }
}

测试代理是否成功，通过Nginx代理端口2222再次访问接口，可以看到如下图通过代理后接口也是能正常访问

接下来开始用网站8080访问Nginx代理后的接口地址，报错情况如下↓↓↓

情况1： 

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet' from origin 'http://localhost:8080' 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 的旧服务器

通过错误信息，我们可以得到是预检请求的请求响应头缺少了 Access-Control-Allow-Origin，错哪里，我们改哪里就好了。修改Nginx配置信息如下（红色部分为添加部分），缺什么就补什么，很简单明了

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

哈哈，当满怀欢喜的以为能解决后，发现还是报了同样的问题

不过我们的配置没什么问题,问题在Nginx,下图链接Module ngx_http_headers_module

 

add_header 指令用于添加返回头字段，当且仅当状态码为图中列出的那些时有效。如果想要每次响应信息都携带头字段信息，需要在最后添加always（经我测试，只有Access-Control-Allow-Origin这个头信息需要加always，其他的不加always也会携带回来），那我们加上试试

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

修改了配置后，发现生效了，当然不是跨域就解决了，是上面这个问题已经解决了，因为报错内容已经变了

情况2：

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet' from origin 'http://localhost:8080' 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）

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

当配置完后，发现报错信息变了

情况3：

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet' from origin 'http://localhost:8080' 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中缺少头信息authorization（各种情况会不一样，在发生跨域后，在自定义添加的头信息是不允许的，需要添加到请求响应头Access-Control-Allow-Headers中，以便浏览器知道此头信息的携带是服务器承认合法的，我这里携带的是authorization，其他的可能是token之类的，缺什么加什么），知道了问题所在，然后修改配置文件，添加对应缺少的部分，再试试

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

此时发现报错问题又回到了情况1

经测试验证，只要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       22222;
        server_name  localhost;
        location  / {
            add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
            if ($request_method = 'OPTIONS') {
                add_header Access-Control-Allow-Origin 'http://localhost:8080';
                add_header Access-Control-Allow-Headers 'authorization';
                return 204;
            }
            proxy_pass  http://localhost:59200; 
        }
    }

此时改完发现跨域问题已经解决了，

不过以上虽然解决了跨域问题，但是考虑后期可能Nginx版本更新,不知道这个规则会不会被修改，考虑到这样的写法可能会携带上两个 Access-Control-Allow-Origin ，这种情况也是不允许的，下面会说到。所以配置适当修改如下：

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

还没完，继续聊 ↓↓

情况4：

比较早期的API可能只用到了POST和GET请求，而Access-Control-Allow-Methods这个请求响应头跨域默认只支持POST和GET，当出现其他请求类型时候，同样会出现跨域异常。

比如，我这里将请求的API接口请求方式从原来的GET改成PUT，在发起一次试试。在控制台上会抛出错误：

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet' from origin 'http://localhost:8080' has been blocked by CORS policy: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

报错内容也讲的很清楚，在这个预请求中，PUT方法是不允许在跨域中使用的，我们需要改下Access-Control-Allow-Methods的配置(缺什么加上么，这里我只加了PUT，可以自己加全一点)，让浏览器知道服务端是允许的

server {
    listen 22222;
    server_name localhost;
    location / {
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080';
            add_header Access-Control-Allow-Headers 'content-type,authorization';
            add_header Access-Control-Allow-Methods 'PUT';#为这么只加在这个if中，不再下面的if也加上？因为这里只有预检请求会校验，当然你加上也没事。
            return 204;
        }
        if ($request_method != 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
        }
        proxy_pass http://localhost:59200;
    }
}

这里注意一下，改成PUT类型后，Access-Control-Allow-Headers请求响应头又会自动校验content-type这个请求头，和情况3是一样的，缺啥补啥就行了。如果不加上content-type，则会报如下错误。（想简单的话，Access-Control-Allow-Headers和Access-Control-Allow-Methods可以设置为 * ,表示全都匹配。但是Access-Control-Allow-Origin就不建议设置成 * 了，为了安全考虑，限制域名是很有必要的。）

都加上后，问题就解决了，这里报405是我服务端这个接口只开放了GET，没有开放PUT，而此刻我将此接口用PUT方法去请求，所以接口会返回这个状态码。

 

情况5：

最后再说一种情况，就是后端处理了跨域，就不需要自己在处理了（这里吐槽下，某些后端工程师自己改服务端代码解决跨域，但是又不理解其中原理，网上随便找段代码黏贴，导致响应信息可能处理不完全，如method没添加全，headers没加到点上，自己用的那个可能复制过来的并不包含实际项目所用到的，没有添加options请求返回状态码等，导致Nginx再用通用的配置就会可能报以下异常）

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet' from origin 'http://localhost:8080' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, http://localhost:8080', but only one is allowed.

意思就是此刻Access-Control-Allow-Origin请求响应头返回了多个，而只允许有一个，这种情况当然修改配置去掉Access-Control-Allow-Origin这个配置就可以了，不过遇到这种情况，建议Nginx配置和服务端自己解决跨域只选其一。（这里注意如果按我上面的写法，if $request_method = 'OPTIONS' 这个里面的Access-Control-Allow-Origin可不能删除，删除!='OPTIONS'里面的就好了，因为这里如果是预检请求直接就ruturn了，请求不会再转发到59200服务，如果也删除了，就会报和情况1一样的错误。所以为什么说要不服务端代码层面解决跨域，要不就Nginx代理解决，不要混着搞，不然不明白原理的人，网上找一段代码贴就很可能解决不了问题）

 ↓ ↓ ↓ ↓ ↓

再贴一份完整配置（*号根据自己‘喜好’填写）：

server {
        listen       22222;
        server_name  localhost;
        location  / {
            if ($request_method = 'OPTIONS') {
                add_header Access-Control-Allow-Origin 'http://localhost:8080';
                add_header Access-Control-Allow-Headers '*';
                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:8080' always;
                add_header Access-Control-Allow-Credentials 'true';
            }
            proxy_pass  http://localhost:59200; 
        }
    }

或者：

server {
        listen       22222;
        server_name  localhost;
        location  / {
            add_header Access-Control-Allow-Origin 'http://localhost:8080' 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:59200; 
        }
    }

最后，这是一篇解决跨域遇到问题解决问题的过程，如果认真看完了，我相信应该都能很容易的理解，并且在实际使用中自己解决该问题，希望能帮助到大家，以上内容都是自己理解自己测试码出来的，如有理解不对的地方，望大家指正。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/257078.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

22.JSP技术

22.JSP技术

JSP起源 在很多动态网页中，绝大部分内容都是固定不变的，只有局部内容需要动态产生和改变。如果使用Servlet程序来输出只有局部内容需要动态改变的网页，其中所有的静态内容也需要程序员用Java程序代码产生，整个Servlet程序的代码将…
阅读更多...
OpenShift 4 - 管理和使用 OpenShift AI 运行环境

OpenShift 4 - 管理和使用 OpenShift AI 运行环境

《OpenShift / RHEL / DevSecOps 汇总目录》 说明：本文已经在 OpenShift 4.14 RHODS 2.50 的环境中验证 文章目录 启停 Notebook Server启动停止 Notebook 镜像Notebook Image 和 ImageStream使用定制的 Notebook Image 定制服务器的运行配置应用和项目用户和访问权…
阅读更多...
一篇文章带你了解各个程序员接单平台，让你选择不再迷茫！！！

一篇文章带你了解各个程序员接单平台，让你选择不再迷茫！！！

相信现在很多程序员都已经走上了或者准备走上网上接单这条路，但是目前市面上的接单平台可谓五花八门，对于各个平台的优缺点，不同的程序员该如何选择适合自己的接单平台，你又是否了解呢？ 接下来就让小编用一篇文章来为…
阅读更多...
C++数据结构——二叉搜索树详解

C++数据结构——二叉搜索树详解

目录 一，关于二叉搜索树 1.1 概念 1.2 基本结构 二，二叉搜索树接口实现 2.1 插入 2.2 查找 2.3 打印 2.4* 删除 三，二叉搜索树接口递归实现 3.1 查找 3.2 插入 3.3 删除 四，二叉搜索树的默认成员函数 五，…
阅读更多...
国产划片机品牌众多，如何选择优质的供应商？

国产划片机品牌众多，如何选择优质的供应商？

在半导体行业的发展浪潮中，划片机作为关键设备之一，其性能和质量对于生产过程的高效性和产品的质量具有至关重要的影响。近年来，国产划片机的品牌数量不断增多，为半导体行业提供了更多的选择。然而，如何从众多的品牌中…
阅读更多...
2023 英特尔On技术创新大会直播 | AI 融合发展之旅

2023 英特尔On技术创新大会直播 | AI 融合发展之旅

前言 2023 年的英特尔 On 技术创新大会中国站，主要聚焦最新一代增强 AI 能力的计算平台，深度讲解如何支持开放、多架构的软件方案，以赋能人工智能并推动其持续发展。 大会的目标之一是优化系统并赋能开发者，特别注重芯片增强技术…
阅读更多...
个人用户的数据之美：数据可视化助力解读

个人用户的数据之美：数据可视化助力解读

数据可视化是一种强大的工具，不仅可以为企业和专业人士提供见解，也对个人用户带来了许多实际的帮助。下面我就以一个数据可视化从业者的视角，来谈谈数据可视化对个人用户的益处： 首先对于个人用户来说，数据可视化可以让…
阅读更多...
金蝶报表二开

金蝶报表二开

本案例描述： 折旧明细报表中加入字段：存放地点、成本中心部门、使用人组织三个字段。 参考社区案例：报表二次开发添加自定义字段的指导方案 步骤： 1、加入报表插件 继承原报表的类。重写BuilderReportSqlAndTempTable、GetRe…
阅读更多...
【Python秘技】用Python实现千图成像，千字成像，编程炫技必备！

【Python秘技】用Python实现千图成像，千字成像，编程炫技必备！

一个千图成像，千字成像的程序，开源给大家玩玩。 用她的名字组成她的照片会不会很酷呢？ 后续会完善更多功能，打包为程序。 源代码在这里：https://github.com/w-x-x-w/Thousand-Image-Generator 讲解在这里&#xff…
阅读更多...
armday1

armday1

1到一百的累加
阅读更多...
Saliency Prediction in the Deep LearningEra: Successes and Limitations

Saliency Prediction in the Deep LearningEra: Successes and Limitations

摘要： 近年来，由于深度学习和大规模注释数据的进步，视觉显著性模型在性能上有了很大的飞跃。然而，尽管付出了巨大的努力并取得了巨大的突破，但模型在达到人类水平的准确性方面仍然存在差距。在这项工作中，…
阅读更多...
CTF命令执行部分总结

CTF命令执行部分总结

😋大家好，我是YAy_17，是一枚爱好网安的小白，正在自学ing。 本人水平有限，欢迎各位大佬指点，一起学习💗，一起进步⭐️。 ⭐️此后如竟没有炬火，我便是唯一的光。⭐️ 关于…
阅读更多...
keep-live原理，react-router如何实现keep-alive

keep-live原理，react-router如何实现keep-alive

3. keep-live原理，react-router如何实现keep-alive 先说结论：被keep-alive标签包裹的组件在第一次初始化时（渲染从render开始）会被缓存起来（以vnode的形式），再次访问时（actived生命周…
阅读更多...
在Python中使用Kafka帮助我们处理数据

在Python中使用Kafka帮助我们处理数据

Kafka是一个分布式的流数据平台，它可以快速地处理大量的实时数据。Python是一种广泛使用的编程语言，它具有易学易用、高效、灵活等特点。在Python中使用Kafka可以帮助我们更好地处理大量的数据。本文将介绍如何在Python中使用Kafka简单案例。 一、安装K…
阅读更多...
[C++]——STL简介

[C++]——STL简介

带你了解c的STL 前言：一、什么是STL?二、STL有什么版本？三、STL的组件有哪些？四、如何学习STL?五、总结 前言： 我写这个博客，是为了在学习过程中能够更加有条理，更加全面，更加清晰的学习STL。…
阅读更多...
喜报|棱镜七彩获评江苏省专精特新中小企业

喜报|棱镜七彩获评江苏省专精特新中小企业

近日，江苏省工业和信息化厅发布《关于江苏省2023年专精特新中小企业和2020年度专精特新企业复核通过企业名单的公示》，棱镜七彩成功入选2023年江苏省省级专精特新中小企业名单。 图 2023年省级专精特新中小企业公式名单节选 “专精特新”是国家为鼓励中…
阅读更多...
Nodejs 第二十五章（http）

Nodejs 第二十五章（http）

“http” 模块是 Node.js 中用于创建和处理 HTTP 服务器和客户端的核心模块。它使得构建基于 HTTP 协议的应用程序变得更加简单和灵活。 创建 Web 服务器：你可以使用 “http” 模块创建一个 HTTP 服务器，用于提供 Web 应用程序或网站。通过监听特定的端…
阅读更多...
docker在线安装nginx

docker在线安装nginx

1、查看所有镜像 1、不带容器卷常规启动nginx，命令如下 docker run --name nginx-test -p 8089:80 -d a6bd71f48f68 2、在宿主机创建/usr/local/data/nginxdocker/目录，在此目录下创建html和logs文件夹，然后将容器内的 nginx.conf 和 html 下…
阅读更多...
nodejs使用nodejieba

nodejs使用nodejieba

Nodejieba是一个基于Node.js平台的中文分词模块，用于将中文文本切分成有意义的词汇。它是结巴中文分词的Node.js版本，结巴分词是一种开源的中文分词工具，广泛应用于中文自然语言处理领域 优点 高性能： Nodejieba的底层实现采用了…
阅读更多...
使用栈的特性实现多位计算器

使用栈的特性实现多位计算器

创建一个栈： //定义一个ArrayStack 表示栈 class ArrayStack2 {private int maxSize; //栈的大小private int[] stack; //定义一个栈private int top -1; //定义一个栈顶指针public ArrayStack2(int size) {maxSize size;stack new int[maxSize];}//栈满public …
阅读更多...
最新文章

Copyright @ 2022~2023