八种方式实现跨域请求
看了这个文章，比较实用的方式就是 JSONP & cors.
- cors
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("Content-Type", "application/json;charset=utf-8");
在http头加上这些以后就可以跨域了。
如果你想要部分url跨域
重新设置 Access-Control-Allow-Origin
- jsonp
原理其实就是利用script标签是可以跨域的。
拿豆瓣的api做演示。地址 https://api.douban.com/v2/book/search?q=javascript&count=1
点击访问可以看到 json 数据. 但是script 标签是不解析JSON的。他只解析 javascript. 只要你增加 callback,
https://api.douban.com/v2/book/search?q=javascript&count=1&callback=response
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
返回值
;handleResponse({ data: "datas" });
会调用你的方法 handleResponse
而 Jquery 中 $.ajax 中的 jsonp 其实原理就是这个
$.ajax({
async : true,
url : "https://api.douban.com/v2/book/search",
type : "GET",
dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
jsonpCallback: 'handleResponse', //设置回调函数名
data : {
q : "javascript",
count : 1
},
success: function(response, status, xhr){
console.log('状态为：' + status + ',状态是：' + xhr.statusText);
console.log(response);
}
});
以上
