XHR跨域请求处理方式——CORS 和 JSONP

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