2025年前端实现跨域（前端做跨域）

前端开发的历史年轮

谈谈你对跨域的理解

跨域主要分3部分：

只要有一个不同，那么就是跨域

同源的目的

目的是为了保护用户信息的安全，防止恶意网站窃取数据，否则Cookie可以共享。有的网站一般会把一些重要信息存放在cookie或者LocalStorage中，这时如果别的网站能够获取获取到这个数据，可想而知，这样就没有什么安全可言了。

限制范围

主要这3种方式不行。

解决方案

方案1：CORS

比较常见的就是nodejs配置CORS允许跨域。

module.exports = {

//=>WEB服务端口号

PORT: 3001,

//=>CROS跨域相关信息

CROS: {

ALLOW_ORIGIN: 'http://127.0.0.1:5500',

ALLOW_METHODS: 'PUT,POST,GET,DELETE,OPTIONS,HEAD',

HEADERS: 'Content-Type,Content-Length,Authorization, Accept,X-Requested-With',

CREDENTIALS: true

}

};

app.use((req, res, next) => {

const {

ALLOW_ORIGIN,

CREDENTIALS,

HEADERS,

ALLOW_METHODS

} = CONFIG.CROS;

res.header("Access-Control-Allow-Origin", ALLOW_ORIGIN);

res.header("Access-Control-Allow-Credentials", CREDENTIALS);

res.header("Access-Control-Allow-Headers", HEADERS);

res.header("Access-Control-Allow-Methods", ALLOW_METHODS);

req.method === 'OPTIONS' ? res.send('CURRENT SERVICES SUPPORT CROSS DOMAIN REQUESTS!') : next();

});

方案2：Proxy

现在主流三大框架，react，vue，argular都使用了webpack进行工程化。在本地开发最常见的就是proxy代理，解决跨域。

主要原理是：客户端像服务器请求数据。webpack-dev-server会再本地创建一个web服务，这个服务会和客户端同源。本地服务实际上是一个node服务，它作为一个中间层会帮客户端去像服务端请求数据，然后把数据返回给客户端。

方案3：JSONP

主要原理：link，script这种是不会跨域的。所以，前端代码写一个script src = http://localhoost:80/list?callback=func，把这个链接发送给服务端。但是传递给服务端的函数必须是一个全局的函数。服务端接受到请求后，会把callback这个值，返回给客户端。客户端获取到服务端返回的指定格式字符串。发现其实就是本地的func全局函数执行，并且把数据传递给这个函数。

但是这种方式有一个弊端，那就是只能get请求，而且不安全，只要服务端支持，谁都可以调用。

下面手写一个JSONP的实现

方案4：nginx反向代理

这是后端需要做的，其实我也不是很熟悉，大致配置方式。

什么是代理？

既然是代理跨域，那么代理(Proxy Server)就是一个很重要的点，这里的代理说的服务器代理，是一种很重要的服务器安全功能，也是一种很常见的设计模式，来隔绝不同的模块，解耦模块。

为什么代理是反理？

nginx就能够把用户的请求分发到空闲的服务器上，然后服务器返回自己的服务到负载均衡设备上，然后负载均衡的设备会讲服务器的服务返回给用户，所以我们并不知道为什么服务的是哪一台服务器发送出来的，这就很好的隐藏了服务器。有一句精辟的话是这么说的：“反向代理就是流量发散状，代理是流量汇聚状。”

方案5：POST MESSAGE

iframe.onload = function () {

iframe.contentWindow.postMessage('消息', 'http://127.0.0.1:1002/');

}

//=>监听B传递的信息

window.onmessage = function (ev) {

console.log(ev.data);

}

方案6：基于iframe的跨域解决方案1——locaction.hash

原理：也是利用iframe可以在不同域中传值的特点，而location.hash正好可以携带参数，所以利用iframe作为这个不同域之间的桥梁。

A域名页面

方案7：基于iframe的跨域解决方案2——window.name

原理其实是和上面的方法一样，区别在于window.name能够传递2MB以上的数据。

A域名页面

了解更多，请点击：https://www.bilibili.com/video/BV13b411g78D

原作者：EmilyYu

原出处：掘金

原文链接：https://juejin.cn/post/6911692236895977486

2025年前端实现跨域（前端做跨域）

相关推荐