关于 Nginx 跨域解决的方法

一、什么是跨域（CORS）

跨域是指 A 页面请求 B 页面资源，当以下任意条件不同，即构成跨域：

• 协议（http / https）

• 域名

• 端口

• 子域名

• IP 与域名

浏览器出于安全策略（同源策略），默认会阻止跨域请求。

⚠️ 注意
跨域限制是浏览器行为
Java、Go 等服务端调用 REST API 不会存在跨域问题

二、跨域总结

• 跨域是浏览器的安全策略造成的，但这是必要的

• 不同源（IP / 域名 / 端口 / 协议）都会导致跨域

• 是否跨域由 请求头 & 响应头 决定

• 解决跨域的核心目标是：
  确保浏览器收到合法的 CORS 响应头

三、跨域解决方案分类

目前常见三种方式：

1. 前端层解决

   • 本地代理（如 Vue / Vite / Webpack DevServer）

2. 网关层解决

   • Nginx / Kong / API Gateway

3. 后端服务解决

   • Java / Go 中配置 CORS（如 Spring Cors）

四、常见跨域场景对照表

⚠️ 子域跨域时，Cookie 默认不可访问

五、关键 CORS 响应头

Access-Control-Allow-Origin: *

注意事项

• 少了会跨域

• 多了（返回两个相同 header）也会跨域

✅ 排查跨域第一步：
直接查看 浏览器 Network → Response Headers

六、前端方案：Vue 本地代理解决跨域

Vue devServer.proxy 示例

module.exports = {
  runtimeCompiler: true,
  publicPath: '/',
  devServer: {
    host: '127.0.0.1',
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://www.xxx.com',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

代理参数说明

1️⃣ target

• 指定真实后端接口地址

2️⃣ changeOrigin

changeOrigin: true

• 是否开启跨域代理

• 必须开启才能解决浏览器跨域

3️⃣ secure（HTTPS 接口）

secure: false

• 用于 https 接口代理时关闭安全校验

4️⃣ pathRewrite

pathRewrite: {
  '^/api': ''
}

• 移除人为添加的 /api 前缀

proxy: {
  '/service1': { target: 'http://service1.xxx.com' },
  '/service2': { target: 'http://service2.xxx.com' }
}

七、Nginx 实现服务端跨域（生产环境）

1️⃣ 找到 Nginx 配置文件

nginx.conf

2️⃣ /api 反向代理配置

location /api {
  rewrite ^.+api/?(.*)$ /$1 break;
  proxy_pass http://www.xxx.com;
}

3️⃣ 完整 server 配置示例

server {
  listen 80;
  server_name 129.204.189.149;

  # 前端静态资源
  location / {
    root /root/baker/vue-recruit/dist;
    index index.html index.htm;
  }

  # 后端接口代理
  location /api {
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://129.204.189.149:5000/;
  }
}

八、Nginx 常见可变配置参数说明

🔹 server_name

• IP 或域名

• 服务器对外访问地址变化时需修改

🔹 root

• 前端 dist 目录路径

• 前端部署路径变化需更新

🔹 proxy_pass

• 后端服务地址 + 端口

• 后端迁移 / 端口变化必须同步修改

🔹 端口（listen / proxy_pass）

• listen：Nginx 对外端口

• proxy_pass：后端服务端口

• 任意端口调整都需同步修改配置

九、结论

• 开发阶段：前端代理最简单

• 生产环境：Nginx 反向代理最稳定

• 跨域问题本质：响应头不合法

• 排查关键点：浏览器 Response Headers

作者：程安宁
日期：2024-12-10