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

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

案例一:www.baidu.comzhidao.baidu.com 是跨域

注意:http:www.baidu.comhttps: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实现不同窗口间的数据传递

相关推荐
YongGit9 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia1 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子2 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试