应用superagent实现跨域请求

大家好，欢迎来到IT知识分享网。

跨域:

浏览器对于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}))的值就可以了；