什么是跨域，怎么解决跨域

椰子鑫2025-03-11 14:08

协议，域名，端口，三者有一不一样，就是跨域

案例一：www.baidu.com 与 zhidao.baidu.com 是跨域

注意：http:www.baidu.com 和 https:www.baidu.com 也是跨域，因为协议不一样

最常发生在前端请求后端接口时候发生，例如

js 复制代码

// 前端代码（http://localhost:8080）
fetch('http://api.xxx.com:8000/user')
  .then(res => res.json())
  .then(data => console.log(data));  
// 浏览器控制台报错：  
// Access to fetch from 'http://localhost:8080' has been blocked by CORS policy...

怎么解决呢？

CORS（跨域资源共享）

适用场景：前后端分离项目、接口需要兼容多种客户端。

CORS是W3C标准，后端只需在响应头里加几个字段，告诉浏览器 "这个接口我允许谁访问"

一般需要后端配置 Access-Control-Allow-Origin: *.xx.com（允许的源）

JSONP

适用场景：老项目兼容、只支持GET请求（比如调用第三方地图API）

Nginx反向代理

适用场景：生产环境部署、微服务网关统一处理。

直接把跨域问题甩给Nginx，让浏览器以为所有请求都是同源的。

nginx 配置示例

bash 复制代码

server {
    listen 80;
    server_name localhost;

    location /api {
        # 转发到真实后端
        proxy_pass http://api.xxx.com:8000;
        # 解决跨域
        add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type';
    }
}

实际请求

js 复制代码

fetch('/api/user')  // 实际访问 http://localhost/api/user → 被Nginx转发

网关层统一处理

适用场景：Spring Cloud Gateway、Kong等API网关，我在的公司使用的就是 dsm 网关和 color 网关。

和Nginx思路类似，但更适合微服务场景，直接在网关层加CORS配置

WebSocket

适用场景：实时通信需求（聊天室、股票行情）。

WebSocket协议没有跨域限制（因为握手阶段走HTTP，后续升级为长连接）

PostMessage

适用场景：页面与iframe、弹窗之间的跨域通信。

通过window.postMessage实现不同窗口间的数据传递