摘要：解决方案跨域问题可以说在前端方面不可避免，但同源策略毕竟在保护网络信息安全方面起到很大的作用。
起因
说起来源...今天去茶水间倒水时，偶然听到公司面试官在问面试者前端跨域的如何解决。我心中默默想了一想，啪啪啪瞬间想出几个关键词，iframe，cors，同源策略，jsonp...转念一想，虽然这是很常见的面试题，然而我在开发过程中，还真没有用过jsonp这种方式...就连原理也说不好。一阵冷汗，? ，赶紧去找了相关资料。
同源策略对于同源策略，在这里我就不多累赘叙述了，简单来说，如果以下三项：同一协议、同一域名、同一端口但凡有一项不满足，浏览器就会把 No "Access-Control-Allow-Origin" header is present on the requested resource甩你一脸。
解决方案跨域问题可以说在前端方面不可避免，但同源策略毕竟在保护网络信息安全方面起到很大的作用。试想如果没有同源策略，别的网页可以轻松窃取你的cookie，而假如你的cookie中存有你的个人信息...太可怕了，不过话说回来同源策略带来的跨域问题也很头疼，幸好现在已经有多种方式能够解决。
CORS 跨域资源共享策略（
JSONP
window.name
document.domain(主域相同的情况下可用）
postMessage(h5新引入）
websocket(h5新引入，不受同源策略限制，所以说h5真是个好东西...?)
...
由于篇幅有限（好吧...其实是我写不了那么多），在这里对于其他解决方式就不一一详解了。
正主来了，JSONPJSONP 是 JSON with Padding的简称，是一种较为常用的解决跨域访问的方式。我们先来看一段示例代码：
ajax({//此ajax方法是封装了XMLHttpRequest对象实现，具体代码与本文无关就不贴了
method : "get",
url : "http://127.0.0.1:8787",
data : {
"name" : "小明",//此ajax方法会自动将数据以get方式提交
"age" : 22
},
success : function (message) {
alert(message);
},
async : true
})
上面的代码很简单，浏览器端发起了一个异步ajax请求，让我们来看看服务端代码：
app.get("*", function(req, res) {//这里只截取了关键代码
res.send("测试数据");
});
清晰，易懂～so，what happend？
不出所料，浏览器甩了我一脸...
易地再战！JSONP炸裂出场～
function showJsonp(obj){
console.log(obj.message);
}
var url = "http://127.0.0.1:8787/?func=showJsonp"
var script = document.createElement("script");
script.setAttribute("src",url);
script.setAttribute("type","text/javascript");
document.getElementsByTagName("head")[0].appendChild(script);
再来后台代码～
app.get("*", function(req, res) {
let callback = req.query.func;
let content = callback+"({"message":"测试数据2"})";
res.send(content);
});
结果：
大！获！全！胜！
是时候分析一波战术策略了～在平常写代码的时候，可能很多人没有注意，浏览器对于script，iframe等标签的src等属性，是没有同源策略限制的。而jsonp就很好的利用了这一点～在我们发起请求时，url后跟了一个名为func的参数，而这个参数就是之后需要用到的回调函数名称。
我们通过动态插入script标签的方式，利用script标签的src属性发起请求，浏览器不会以同源策略来找事...而后台根据请求构造出的数据长啥样呢？
showJsonp({"message":"测试数据2"})
告诉我！这段代码插入你的script标签内后，会发生啥？！
当然是执行早就定义好的showJsonp函数啊～
bingo，完美解决跨域问题～～
jsonp的方式兼容性非常好，即便是那些老古董浏览器，也可以用jsonp的方式解决跨域问题，但是它也有所限制，它只能使用get方式发起请求，并且对于不同域之间页面的js互相调用无能为力。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81655.html
摘要：解决方案跨域问题可以说在前端方面不可避免，但同源策略毕竟在保护网络信息安全方面起到很大的作用。 起因 说起来源...今天去茶水间倒水时，偶然听到公司面试官在问面试者前端跨域的如何解决。我心中默默想了一想，啪啪啪瞬间想出几个关键词，iframe，cors，同源策略，jsonp...转念一想，虽然这是很常见的面试题，然而我在开发过程中，还真没有用过jsonp这种方式...就连原理也说不好。...
阅读 2975·2021-11-15 18:14
阅读 1574·2021-09-22 10:51
阅读 3062·2021-09-09 09:34
阅读 3333·2021-09-06 15:02
阅读 831·2021-09-01 11:40
阅读 3078·2019-08-30 13:58
阅读 2403·2019-08-30 11:04
阅读 985·2019-08-28 18:31
