老生常谈的跨域问题JSONP解决方式

jemygraw 发布于2019-08-01 16:20 / 903人阅读

摘要：解决方案跨域问题可以说在前端方面不可避免，但同源策略毕竟在保护网络信息安全方面起到很大的作用。

起因

说起来源...今天去茶水间倒水时，偶然听到公司面试官在问面试者前端跨域的如何解决。我心中默默想了一想，啪啪啪瞬间想出几个关键词，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真是个好东西...?)

...

由于篇幅有限（好吧...其实是我写不了那么多），在这里对于其他解决方式就不一一详解了。

正主来了，JSONP

JSONP 是 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互相调用无能为力。

GPU云服务器云服务器 jsonp 跨域 jsonp 跨域乱码 jsonp跨域请求 ajax jsonp跨域传值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50449.html

老生常谈的跨域问题JSONP解决方式

摘要：解决方案跨域问题可以说在前端方面不可避免，但同源策略毕竟在保护网络信息安全方面起到很大的作用。起因说起来源...今天去茶水间倒水时，偶然听到公司面试官在问面试者前端跨域的如何解决。我心中默默想了一想，啪啪啪瞬间想出几个关键词，iframe，cors，同源策略，jsonp...转念一想，虽然这是很常见的面试题，然而我在开发过程中，还真没有用过jsonp这种方式...就连原理也说不好。...

asoren 2019-08-20 14:28 评论0 收藏0
彻底弄懂跨域问题

摘要：用于告知浏览器可以将预先检查请求返回结果缓存的时间，在缓存有效期内，浏览器会使用缓存的预先检查结果判断是否发送跨域请求。跨域，老生常谈的问题简述作为一只前端菜鸟，跨域方面只懂得JSONP和CORS，并未曾深入了解。但随着春招越来越近，就算是菜鸟也要猛振翅膀。近几日仔细研究了跨域问题，写下这篇文章，希望对开发者们有所帮助。在读本文前，希望您对以下知识略有了解。浏览器同源策略 n...

rose 2019-07-25 14:36 评论0 收藏0
彻底弄懂跨域问题

摘要：浏览器同源策略我们为何要研究跨域问题因为浏览器的同源策略规定某域下的客户端在没明确授权的情况下，不能读写另一个域的资源。跨域，老生常谈的问题简述作为一只前端菜鸟，跨域方面只懂得JSONP和CORS，并未曾深入了解。但随着春招越来越近，就算是菜鸟也要猛振翅膀。近几日仔细研究了跨域问题，写下这篇文章，希望对开发者们有所帮助。在读本文前，希望您对以下知识略有了解。浏览器同源策略 n...

CoorChice 2019-08-23 14:41 评论0 收藏0
老生常谈跨域问题

摘要：浏览器在请求不同域的资源时，会因为同源策略的影响请求不成功，这就是通常被提到的跨域问题。需要说明的几个点如果是协议和端口造成的跨域问题，前端是无能为力的。前段时间在网上跟一个大厂据说很NB的同行大佬聊天，然后大佬问了我一个问题，在实际生产中前端怎么解决跨域问题我当时就回答说我们目前的状况是需要服务端做一些配合解决的，然后大佬很不满意的暗示了我一下JSONP用过吗？我当时就觉得很不可...

Kaede 2019-08-23 17:54 评论0 收藏0