news 2026/2/17 2:29:09

Web前端入门第 89 问:总结 8 种跨域通信处理方案

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Web前端入门第 89 问:总结 8 种跨域通信处理方案

首先跨域问题是由于浏览器的同源策略(Same-Origin Policy)导致的,基本上所有浏览器都有限制,默认情况是不允许跨域访问的!!

APP 的请求不受浏览器的同源策略限制,所以不存在跨域。类似一个服务器像另一个服务器发起请求一样,也不会受跨域影响。

想想一下:如果浏览器没有同源策略限制,A 网站可以随意访问 B 网站内容,那么现在 BAT 这些一线大厂还有护城河吗?所有网站的数据都无隐私可言了,各种钓鱼网站在浏览器中横飞!!那世道...简直太美~~

什么是同源

同源:指的是协议、域名和端口都相同。任意一个不同,都会触发浏览器的同源策略,从而导致跨域。

以 MDM 的一个文档地址为例,看看 URL 不同的组成部分:https://developer.mozilla.org:443/zh-CN/docs/Web/JavaScript?a=b#hash

1

跨域解决方案

虽然默认情况下浏览器是不允许跨域访问的,但通过一些配置手段,还是能够实现资源共享~~

1、跨域资源共享 CORS

目前主流的跨域共享方案,由服务器配置响应头告诉浏览器是否允许跨域访问:

// 或 * 表示所有源都可以访问

Access-Control-Allow-Origin: https://domain.com

// 允许的方法

Access-Control-Allow-Methods: GET, POST, OPTIONS

// 允许的自定义头

Access-Control-Allow-Headers: Content-Type, Authorization

// 允许携带 Cookie

Access-Control-Allow-Credentials: true

2、反向代理

原理就是前端请求同源服务器,由同源服务器向跨域目标发起请求,再由同源服务器返回结果给前端。绕过了浏览器同源策略,但需要服务器支持,如果请求量太大,对自己的服务器要求很高。

比如 nginx / node 中间件 / 开发环境的 dev-server 都是这种方式,以 nginx 跨域配置为例:

location /api/ {

proxy_pass https://domain.com/; # 需要请求的跨域目标

proxy_set_header Host $host;

}

3、WebSocket

WebSocket 是 HTML5 新增的协议,允许浏览器和服务器之间进行全双工通信,天然支持跨域访问。由于是双向通信,所以对服务器压力也不小。

const ws = new WebSocket('wss://domain.com');

ws.onmessage = (event) => console.log(event.data);

4、JSONP

利用 <script> 标签,向目标服务器发起请求,目标服务器需要返回一段函数调用,将数据返回给前端。缺点是仅支持 get 请求,还容易引发 XSS 攻击!

function handleResponse(data) {

console.log(data);

}

const script = document.createElement('script');

script.src = 'https://domain.com/data?callback=handleResponse';

document.head.appendChild(script);

https://domain.com/data?callback=handleResponse 需要返回 JS 代码调用函数执行:

handleResponse({ data: 'hello' });

5、postMessage

此方式一般多用于 iframe 的跨域通信,比如 A 网页使用 iframe 嵌入 B 网页,这种情况就可以使用 postMessage 通信:

发送者:

// 发送方

iframe.contentWindow.postMessage('data', 'https://target-domain.com');

接收者:

// 接收方

window.addEventListener('message', (event) => {

if (event.origin !== 'https://source-domain.com') {

return;

}

console.log(event.data);

});

不推荐的方案

浏览器的版本升级后,一些老旧的跨域方案被弃用,比如:

6、document.domain + iframe

在过去,如果同一个主域名,子域名不同的情况,比如:a.domain.com 和 b.domain.com 之间进行通信,可以通过设置 document.domain = 'domain.com' 来解决,但现在的浏览器已经限制使用了!!

7、window.name + iframe

此方案有一些复杂,需要一个空白的同源页面用于绕过浏览器的同源策略,然后获取 iframe 的 name 属性值,此处有大小限制,最多 2MB 的数据。

流程:

源页面A (domainA.com)

↓ 创建iframe指向代理页面B (domainB.com)

代理页面B (domainB.com)

↓ 接收数据并存入 window.name

↓ 跳转至与A同源的空白页面C (domainA.com)

源页面A

↓ 访问iframe的window.name获取数据

流程图:

2

目前项目开发基本上已经不在使用这种方式,毕竟绕来绕去的,还不如一个 postMessage 跨域方案简单。

8、location.hash + iframe

通过修改 URL Hash 实现父子 iframe 间单向数据传输,虽然勉强也能算作一种跨域方案,但由于 URL 的长度限制,数据量也不能太大,实际使用中也不简单,所以项目上也很难见到它的身影~~

流程图:

3

写在最后

除了文章中这 8 种跨域方案外,还有一些单向数据通信的方法,比如说:

1、使用 Fetch API 的 no-cors 模式。

2、利用图片的 src 属性发起 GET 请求。

3、使用 sendBeacon 发送分析数据。

这些方法都只能向服务器发送数据,没办法获得服务器的响应,所以一般多用于一些数据统计,比如:百度统计、谷歌分析等等。

当然也有一些歪门邪道,比如说:修改浏览器的配置允许跨域,编写浏览器插件支持跨域等等。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/2/15 0:00:47

【程序员必备】LoRA微调技术面经总结:收藏级大模型学习指南

文章详细介绍了LoRA&#xff08;低秩适应&#xff09;技术&#xff0c;这是一种用于大模型高效微调的方法。LoRA通过低秩分解模拟参数变化&#xff0c;冻结原模型参数&#xff0c;只训练少量旁路矩阵&#xff0c;显著降低显存需求&#xff0c;使普通显卡也能进行大模型微调。文…

作者头像 李华
网站建设 2026/2/11 3:19:42

VonaJS AOP编程大杀器:外部切面

在VonaJS框架中&#xff0c;AOP编程包括三方面&#xff1a;控制器切面、内部切面和外部切面。控制器切面: 为 Controller 方法切入逻辑&#xff0c;包括&#xff1a;Middleware、Guard、Interceptor、Pipe和Filter内部切面: 在 Class 内部&#xff0c;为任何 Class 的任何方法切…

作者头像 李华
网站建设 2026/2/5 1:30:17

如何将Llama factory的训练结果导入Ollama中进行部署

&#x1f680; LlamaFactory 模型导入 Ollama 的步骤 整个过程主要分为两大部分&#xff1a;转换模型格式 和 导入 Ollama。 第一步&#xff1a;将 LlamaFactory 训练结果转换为 GGUF 格式 LlamaFactory 导出的模型权重通常是 Hugging Face 格式&#xff08;包含 safetensors 或…

作者头像 李华