同源策略(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的网站请求数据。
