XHR跨域請求處理方式——CORS 和 JSONP

標簽：

JavaScript

cors : 低版本浏览器不支持，支持所有请求类型。
cors跨域资源共享，只需要后端做处理，前端不需要做任何事。
后端要设置响应头如下：
{
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers":"X-Requested-With",
"Access-Control-Allow- Methods":"PUT,POST,GET,DELETE,OPTIONS",
"X-Powered-By": ' 3.2.1'
}

如下是node server 用cors处理跨域，得到前端发来的数据后，原样返回：

//server.js

http.createServer((req, res) => {
    console.log('request for 3001 receive');        
    var data = '';
    req.on('data',(chrunk) => {
        data += chrunk;
    });
    req.on('end',() =>{      
        res.writeHead(200,{
            'Content-Type' : 'text/plain',
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Headers":"X-Requested-With",
            "Access-Control-Allow-Methods":"PUT,POST,GET,DELETE,OPTIONS",
            "X-Powered-By": ' 3.2.1'
        });
        res.end(data.toString());
    })
}).listen(3001);

2.jsonp : 低版本浏览器也适用，但只能发送GET请求

jsop 是json with padding (填充式json或参数式json）的简写，jsonp与json看起来差不多，只不过是被包含在函数调用中的json,像下面这样：
callback({ "name" : "xsn"})
jsonp由两部分组成：回调函数和数据。回调函数的名字一般是在请求中指定，数据就是传入回电函数中的json数据。当响应来到时，会在页面中调用这个回调函数。
jsonp是通过动态<script>标签来实用的，通过src属性指定一个跨域url,在url中指定回调函数。请求完成后，会在jsonp响应页面重立即执行回调函数中的javaScript代码.

如下指定的回调函数的名称是 handler;

function handler(res){
    console.log(res)
}
var script = document.createElement('script');
script.src = 'http://localhost:3001/?callback=handler';
document.body.insertBefore(script, document.body.firstChild);

點擊查看更多內(nèi)容