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

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

案例一: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实现不同窗口间的数据传递

相关推荐
小毛驴8509 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏38 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko2 小时前
HTML 常用标签速查表
前端·html