关于跨域

八种方式实现跨域请求
看了这个文章,比较实用的方式就是 JSONP & cors.

  1. 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

  1. 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);
    }
});

以上

你可能感兴趣的:(关于跨域)