【亲测好用】跨域备忘单的最佳解决方案

这是一份针对前端/全栈开发者的跨域(CORS)备忘单，覆盖原理、排查、解决方案与代码模板，建议收藏备用。

一、 核心原理速查

同源策略三要素：协议、域名、端口必须完全一致，任一不同即跨域。

关键认知：跨域是浏览器的安全限制，请求本身能到达后端，但浏览器会拦截响应数据。服务器间通信不存在跨域。

二、 简单请求 vs 预检请求

表格

下载为表格

导出为图片

类型条件请求流程

简单请求GET/HEAD/POST + Content-Type 为 text/plain / multipart/form-data / application/x-www-form-urlencoded直接发送请求

预检请求PUT/DELETE、自定义请求头、JSON 格式 Content-Type 等先发 OPTIONS 预检 → 后端响应允许 → 再发真实请求

三、 CORS 核心响应头速查

文本

编辑

1Access-Control-Allow-Origin: https://example.com # 允许的源(生产环境禁用 *)

2Access-Control-Allow-Methods: GET, POST, PUT, DELETE # 允许的 HTTP 方法

3Access-Control-Allow-Headers: Content-Type, Token # 允许的自定义请求头

4Access-Control-Allow-Credentials: true # 允许携带 Cookie(此时 Origin 不能为 *)

5Access-Control-Max-Age: 3600 # 预检请求缓存时间(秒)

6Access-Control-Expose-Headers: X-Custom-Header # 允许前端读取的响应头

四、 解决方案选型指南

表格

下载为表格

导出为图片

场景推荐方案备注

本地开发Vite/Webpack devServer 代理前端自己搞定，无需后端配合

生产环境Nginx 反向代理 或 CORS二选一，Nginx 更彻底

前后端分离标准方案CORS后端配置，W3C 标准

iframe / 多窗口通信postMessage需校验 e.origin 防恶意消息

实时通信WebSocket天生不受同源策略限制

老系统兼容JSONP仅 GET，有 XSS 风险，已淘汰

五、 常用配置模板

Vite 代理(开发环境)

js

编辑

1// vite.config.js

2export default defineConfig({

3 server: {

4 proxy: {

5 '/api': {

6 target: 'http://localhost:3000',

7 changeOrigin: true,

8 rewrite: (path) => path.replace(/^/api/, '')

9 }

10 }

11 }

12})

Nginx 反向代理(生产环境)

nginx

编辑

1server {

2 listen 80;

3 server_name www.frontend.com;

4 location /api {

5 proxy_pass http://www.backend.com;

6 proxy_set_header Host $host;

7 proxy_set_header X-Real-IP $remote_addr;

8 }

9}

Spring Boot 全局 CORS 配置

java

编辑

1@Configuration

2public class CorsConfig implements WebMvcConfigurer {

3 @Override

4 public void addCorsMappings(CorsRegistry registry) {

5 registry.addMapping("/**")

6 .allowedOrigins("http://localhost:8080")

7 .allowedMethods("GET", "POST", "PUT", "DELETE")

8 .allowedHeaders("*")

9 .allowCredentials(true)

10 .maxAge(3600);

11 }

12}

Node.js (Express) CORS 中间件

js

编辑

1const cors = require('cors');

2app.use(cors({

3 origin: 'http://localhost:8080',

4 credentials: true

5}));

六、 高频踩坑点

Allow-Credentials: true 时，Allow-Origin 不能用 *，必须指定具体域名

复杂请求的 OPTIONS 预检必须返回 204 状态码，否则真实请求不会发出

微服务架构下应在网关层统一配置 CORS，避免各服务重复配置导致响应头冲突

前端 fetch/XHR 携带 Cookie 需设置 credentials: 'include' / withCredentials: true

document.domain 方案在 Chrome 115+ 已废弃，不再推荐使用