当前位置：首页 > news >正文

跨域解决方案

news 2026/5/13 4:30:15

一、什么是跨域？

跨域是指浏览器在发起请求时，请求的协议、域名、端口三者中，只要有一个与当前页面的地址不同，就会被浏览器拦截。

判断规则

以当前页面 http://localhost:8080 为例：

请求地址	是否跨域	原因
`http://localhost:8080/api`	❌ 同源	协议、域名、端口完全一致
`https://localhost:8080/api`	✅ 跨域	协议不同（http vs https）
`http://api.example.com/api`	✅ 跨域	域名不同
`http://localhost:3000/api`	✅ 跨域	端口不同（8080 vs 3000）

跨域的本质

跨域不是后端拒绝了你，是浏览器拦截了响应。

浏览器发请求 → 后端正常处理并返回数据 → 浏览器检查是否跨域↓跨域 → 浏览器拦截数据，抛错同源 → 正常交给前端代码

为什么要有跨域限制？

浏览器的同源策略，是为了保护用户安全。举个例子：

你登录了 bank.com，浏览器保存了登录 Cookie↓
你不小心打开了 hacker.com↓
如果没有同源策略，hacker.com 的 JS 可以：- 读取 bank.com 的 Cookie- 伪造转账请求- 窃取你的账户信息

同源策略就是浏览器的安全门卫，防止恶意网站窃取数据。

二、怎么解决跨域？

方案一：后端配置 CORS（最推荐，生产首选）

原理：后端在响应头中告诉浏览器：“这个跨域请求是我允许的，放行。”

Spring Boot 配置方式

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/api/**")                    // 允许跨域的路径.allowedOriginPatterns("*")               // 允许所有来源（生产环境建议指定具体域名）.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowedHeaders("*").allowCredentials(true)                   // 允许携带 Cookie.maxAge(3600);                            // 预检请求缓存时间（秒）}
}

Nginx 配置方式

server {listen 80;server_name api.example.com;location / {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';add_header Access-Control-Allow-Headers 'Content-Type, Authorization';if ($request_method = 'OPTIONS') {return 204;}proxy_pass http://localhost:8080;}
}

方案二：前端代理（开发环境首选）

原理：前端请求同源的代理服务器，代理服务器转发到后端（服务器间通信不受同源策略限制）。

Vue 项目配置（vue.config.js）

module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8090',  // 后端地址changeOrigin: true,pathRewrite: {'^/api': ''}}}}
}

React 项目配置（setupProxy.js）

const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) {app.use('/api',createProxyMiddleware({target: 'http://localhost:8090',changeOrigin: true,}));
};

方案三：Nginx 反向代理（生产环境首选）

原理：前端和 Nginx 同源，Nginx 转发请求到后端，浏览器不感知跨域。

server {listen 80;server_name www.example.com;# 前端静态文件root /var/www/html;index index.html;# 反向代理后端接口location /api/ {proxy_pass http://localhost:8080/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;}# 处理前端路由（history 模式）location / {try_files $uri $uri/ /index.html;}
}

三、三种方案对比

方案	适用环境	优点	缺点
后端 CORS	生产环境	配置简单，标准方案	需要后端配合
前端代理	开发环境	无需后端配合，快速调试	仅开发环境有效
Nginx 反向代理	生产环境	隐藏后端地址，性能好	需要运维配置

四、常见踩坑点

问题	原因	解决方案
`allowedOrigins("*")` 报错	与 `allowCredentials(true)` 冲突	改用 `allowedOriginPatterns("*")`
OPTIONS 请求返回 403	后端没处理预检请求	在拦截器中放行 OPTIONS 请求
带 Cookie 跨域失败	前端没设置 `withCredentials: true`	前端设置 `axios.defaults.withCredentials = true`
生产环境跨域	前端代理只在开发环境生效	改用 Nginx 反向代理或后端 CORS