Nginx轻松解决跨域问题，就是这么简单
时间：2026-09-24 14:53 来源：未知 人气：
当你遇到跨域问题，不要立刻就选择复制去尝试。请详细看完这篇文章再处理 。我相信它能帮到你。
分析前准备：
- 前端网站地址：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.
闽公网安备 35020602001684号