跨域问题详解

1.1 跨域的概念

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略， 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域（协议，域名，端口号均相同）请求HTTP资源。
跨域的解决方案：

1 图像Ping

我们知道，一个网业可以从任何网页中加载图像，不用担心跨域问题。所以可以利用标签，动态创建图像，使用他们的onload和onerror事件处理程序来确定是否接收到了响应。
图像ping是与服务器进行简单.单向通讯的一种方式，请求的数据是通过查询字符串形式发送的，而响应可以使任何内容，但通常是像素图或204（No Content）响应（表示目前请求成功，没有内容）。通过图像Ping，浏览器无法得到任何数据，但通过侦听load和error事件，他们能知道响应是何时接受到的。

1
2
3
4
5

var img = new Image();
img.onload = img.onerror = function(){
    alert('done')
}
img.src = 'http://www.example.com/test?name=GeminiKnight'

图像Ping常用于跟踪用户点击页面或动态广告曝光次数
主要有两个缺点： 1.只能发送GET请求（所以能发送的数据有限，也不安全）
2.无法访问服务器的响应文本

2 JSONP

既然可以利用img标签实现跨域，那同样不受跨域限制的script标签是否也能实现跨域呢？答案是当然可以。JSONP（JSON with padding）由两部分内容组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的，而数据就是传入回调函数中的JSON数据，例如：
http://freegeoip.net/json/?callback=handleResponse
这里指定回调函数为handleResponse

function handleResponse(response){
alert(‘你的IP地址是’+ response.ip +’位于’ +’response.city’)
}
var script = document.createElement(‘script)
script.src = ‘http://freegeoip.net/json/?callback=handleResponse'
document.body.insertBefore(script,document.body.firstChild)
`
与图像Ping相比，他的优点在于可以直接访问响应文本，支持浏览器和服务器双向通信。不过它也有两点不足：1.JSONP是从其他域中加载代码，如果其他域不安全，可能会在代码中加载恶意代码
2.很难判断JSONP请求成功与否。

2 JSONP