应用superagent实现跨域请求

跨域:

浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.

上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同

 

同源策略:

请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

jsonp跨域:

我们来简单的模拟一下JSONP的通信过程。

function handleResponse(response) {
    console.log(response.data);
}
var script = document.createElement("script");
script.src = "http://example.com/jsonp/getSomething?uid=123&callback=hadleResponse"
document.body.insertBefore(script, document.body.firstChild);

它的过程是这样子的:

  1. 当我们通过新建一个script标签请求时,后台会根据相应的参数来生成相应的JSON数据。比如说上面这个链接,传递了handleResponse给后台,然后后台根据这个参数再结合数据生成了handleResponse({"data": "hey"})
  2. 紧接着,这个返回的JSON数据其实就可以被当成一个js脚本,就是对一个函数的调用。
  3. 由于我们事先已经声明了这么一个回调函数,于是当资源加载进来的时候,直接就对函数进行调用,于是数据当然就能获取到了。
  4. 至此,跨域通信完成。

另外,想要实现JSONP,后台服务器也必须做相应的设置。

值得一提的是,JSONP是存在一定的局限性的:

  • 只能用于GET请求
  • 存在安全问题,请求代码中可能存在安全隐患
  • 要确定JSONP请求是否失败并不容易

在superagent中使用JSONP


import jsonp from 'superagent-jsonp'
import superagent from 'superagent';


superagent.get('https://apis.map.qq.com/ws/geocoder/v1/')
            .use(jsonp({timeout: 1000}))
            .query({location:latitude+','+longitude,key:'4DXBZ-4UTK3-HEW32-3R2XX-ZDTJQ-GNFN7'})
            .query({output: 'jsonp'})
            .end(callback)

如果出现superagentCallback is not defined ;一般上是浏览器回收了请求机制:只要改变 .use(jsonp({timeout: 1000}))的值就可以了;

 

展开阅读全文

没有更多推荐了,返回首页