跨域请求

同源策略(Same origin Policy)

浏览器出于安全方面的考虑，只允许与本域（同协议、同域名、同端口）下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

跨域的几种方法

CORS

CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。
实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。

如何使用：
1、简单模式（GET、 POST）
目标服务器在响应头里添加下面代码 即可

    response.setHeader('Access-Control-Allow-Origin','http://xxx.com')

2、复杂模式（除了 GET、POST）
目标服务器在响应头里添加下面代码 即可

    response.setHeader('Access-Control-Allow-Origin',
     'http://xxx.com')
    response.setHeader('Access-Control-Allow-Methods', 
     'OPTIONS, PATCH, DELETE, HEAD')

会发两次请求，第一次是 OPTIONS 请求，询问目标服务器是否允许 PUT/PATCH如果允许，则发真正的请求。

JSONP

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问

使用：
1、让目标网站在一个 xxx.js 里放置数据，形式是 JSON + Padding

{{callback}}({
"name":"fang",
"age":23
})

2、本网站使用 script 加载 xxx.js

var script = document.createElement('script')
script.src = 'http://xxx.com/xxx.js'
document.head.appendChild(script)

3、约定用 callback=xxx 来交流
前端代码

jsonp('http://ll.com/ll.js',function(data){
  console.log(data)
})
function jsonp(url, fn){
  var functionName = xxx
  window[functionName] = fn

  var script = document.createElement('script')
  script.src = url + '?callback=' + functionName
  document.head.appendChild(script)

}

后端代码

// nodejs
if(path === '/xxx.js'){  
  var callback = query.callback
  var string = fs.readFileSync('./xxx.js','utf8')
  response.setHeader('Content-Type', 'text/javascript; charset=utf-8')
  response.end(string.replace('{{callback}}',callback))
}

4 jQuery 用法：

$.ajax({
  url:'http://qq.com/xxx.js',
  dataType: 'jsonp',
  success: function(data) {
    console.log(data)
  }
})

JSONP和AJAX的区别

1、原理 JSONP 是 script ，AJAX 是 JS 发起的请求。
2、JSONP只支持GET请求，CORS支持所有类型的HTTP请求。
3、JSONP 不太安全，因为大家都可以访问（没有跨域限制），AJAX 有跨域限制。
4、JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。