2024年前端最全前后端数据交互(七)——前端跨域解决方案(全)，前端算法与数据结构面试 修言 小册

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

运行服务执行成功之后就会打印出：

{

callback: “back”

user: “‘111’”

}

JSONP 的缺点：只允许处理 get 请求，由于请求的数据都暴露在url中，容易被劫持，安全性很差，所以不推荐使用。

3.2、CORS 跨域资源共享

通过设置响应头处理的，需要后台配合处理。如果只是普通跨域请求，前端无需设置，后台设置

Access-Control-Allow-Origin，如：

/* 允许所有域名访问 */

response.setHeader(“Access-Control-Allow-Origin”,“*”);

/* 只允许某个域名访问 */

header(“Access-Control-Allow-Origin: www.xxx.xom”);

如果需要带cookie请求，前端也需要设置字段。如：

// 前端设置是否带cookie

xhr.withCredentials = true;

特点：客户端发送(ajax fetch)请求，后台设置请求头相关信息，允许哪些源请求数据，需要处理 options 试探性请求。

3.3、proxy 代理

因为服务器间的数据交互没有跨域限制，所以通过一个中间代理服务器请求目标服务器的数据，也就是前端服务器发送请求到代理服务器，代理服务器再请求目标服务器，将数据返回给前端服务器。

我们现在常用的三方框架 VUE、React项目中跨域解决方案都使用的是代理。如config.js中代理配置如下：

proxy: { //配置跨域

‘/’: {

target: ‘http://www.xxxx.com/’, //线上

changOrigin: true, //允许跨域

pathRewrite: {

‘^/’: ‘’

}

},

}

3.4、nginx反向代理

nginx反向代理，只需要后台配置服务就可以了，前端无需任何操作。其原理是：浏览器将请求发送到反向代理服务器，由反向代理服务器去选择目标服务器获取数据，再返回给浏览器，此时暴露的是代理服务器的地址，隐藏了真实的服务器地址。

3.5、postMessage

postMessage 是全局对象 window 的属性之一。可以安全地实现跨域通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确地使用，这种方法就很安全。

使用语法：

window.postMessage(data,url)

具体实现案例如下：

// a页面 – http://localhost:1000/a.html

// b页面 – http://localhost:2000/b.html

3.6、webSocket

Websocket 是 html5一种新协议，实现浏览器与服务器互相通信，同时还允许跨域通讯。原生的 Websocket 可点击 《WebSocket 基础教程》学习更多知识。websocket api使用起来不便，我们更多地使用它的封装版 socket.io，使用简单，易操作。

具体的实现方法，请点击《一文读懂 WebSocket 原理》。

3.7、iframe + document.domain

只能实现同一个主域，不同子域之间的跨域通信。

实现原理：两个页面都通过 js 强制设置 document.domain为基础主域，就实现了同域。

缺点：限制较多。可作为了解就行。

3.8、iframe + location.hash

实现原理：a与b跨域通信，通过中间页c来实现，三个页面，不同域之间可以利用 iframe 的 location.hash传值，相同域之间直接利用 js 通信。

必须要 3 个页面。

具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。
3.9、iframe + window.name

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。