本文介绍了JSONP、WebSocket、CORS以及服务端和前端的代理解决方案在跨域通信中的应用，重点讲述了JSONP的工作原理和面试中可能被问到的问题。阅读本文可以帮助理解这些技术在实际开发中的角色和应用场景。
=============================================================================
-
1、JSONP (现在已经很少有，只支持get,而且用起来也很麻烦)
-
2、WebSocket（算是常用，客户端和服务端 双工通讯，但是 一般只用于特定的某些场景：比如需要实时更新的数据，像股市实时走势图）
-
3、CORS （常用，通过设置cors请求头的方式解决，一般由后台设置）
-
4、服务端正向代理 （少用，通过前端nodejs启动一个服务器代理转发的方式）
-
5、nginx反向代理（前端开发的时候本地通过vue.config.js中的proxy代理的方式，需要部署到线上的时候，让后端配置nginx，对匹配到的接口进行代理转发）
-
6.postMessage（少用）
上面前五种方式，在面试时，都要说出来。
面试会问：JSONP的原理是什么？怎么实现的？
在CORS和postMessage以前，我们一直都是通过JSONP来做跨域通信的。
JSONP的原理：通过script标签的异步加载来实现的。比如说，实际开发中，我们发现，head标签里，可以通过script标签的src，它是没有同源限制的，里面放url，加载很多在线的插件。这就是用到了JSONP。
JSONP的实现：
比如说，客户端这样写：
上面的src中，data=name是get请求的参数，myjsonp是和后台约定好的函数名。
服务器端这样写：
res.set(‘content-type’, ‘text/javascript’);
res.body = res.query.callback+ ‘(“你好”)’;
在前端：
本地要求创建一个myjsonp 的全局函数，才能将返回的数据执行出来。
var util = {};
//定义方法：动态创建 script 标签
/**
-
[function 在页面中注入js脚本]
-
@param {[type]} url [description]
-
@param {[type]} charset [description]
-
@return {[type]} [description]
*/
util.createScript = function (url, charset) {
var script = document.createElement(‘script’);
script.setAttribute(‘type’, ‘text/javascript’);
charset && script.setAttribute(‘charset’, charset);
script.setAttribute(‘src’, url);
script.async = true;
return script;
};
/**
-
[function 处理jsonp]
-
@param {[type]} url [description]
-
@param {[type]} onsucess [description]
-
@param {[type]} onerror [description]
-
@param {[type]} charset [description]
-
@return {[type]} [description]
*/
util.jsonp = function (url, onsuccess, onerror, charset) {
var callbackName = util.getName(‘tt_player’); //事先约定好的 函数名
window[callbackName] = function () { //根据回调名称注册一个全局的函数
if (onsuccess && util.isFunction(onsuccess)) {
onsuccess(arguments[0]);
}
};
var script = util.createScript(url + ‘&callback=’ + callbackName, charset); //动态创建一个script标签
script.onload = script.onreadystatechange = function () { //监听加载成功的事件，获取数据
if (!script.readyState || /loaded|complete/.test(script.readyState)) {
script.onload = script.onreadystatechange = null;
// 移除该script的 DOM 对象
if (script.parentNode) {
script.parentNode.removeChild(script);
}
// 删除函数或变量
window[callbackName] = null; //最后不要忘了删除
}
};
script.onerror = function () {
if (onerror && util.isFunction(onerror)) {
onerror();
}
};
document.getElementsByTagName(‘head’)[0].appendChild(script); //往html中增加这个标签，目的是把请求发送出去
};
WebSocket的用法如下：
var ws = new WebSocket(‘wss://echo.websocket.org’); //创建WebSocket的对象。参数可以是 ws 或 wss，后者表示加密。
//把请求发出去
ws.onopen = function (evt) {
console.log(‘Connection open …’);
ws.send(‘Hello WebSockets!’);
};
//对方发消息过来时，我接收
ws.onmessage = function (evt) {
console.log('Received Message: ', evt.data);
ws.close();
};
//关闭连接
ws.onclose = function (evt) {
console.log(‘Connection closed.’);
};
Websocket的推荐链接：http://www.ruanyifeng.com/blog/2017/05/websocket.html
Cross-origin resource sharing 跨域资源共享
cors这里只需要后端在这个接口设置请求头就好了，例如
Access-Control-Allow-Origin
另外，如果面试官问：“CORS为什么支持跨域的通信？”
答案：跨域时，浏览器会拦截Ajax请求，并在http头中加Origin。
node帮我们做中间层，帮我们发出跨域的请求，后端拿到请求到的数据在返回给我们，
因为后端是没有跨域这一个说法的，所以也不存在跨域这个问题
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！
可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。
会持续更新！**
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
[外链图片转存中…(img-UD2RZLw4-1713454376311)]
最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！
可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
