为什么会有跨域

默认情况下，XHR 对象只能访问与包含它的页面位于同一个域中的资源。

跨域方法

一、CORS

思想

使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
1.在发送该请求时，需要给它附加一个额外的 Origin 头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部信息来决定是否给予响应。下面是 Origin 头部的一个示例：
Origin: http://www.nczonline.net
2.如果服务器认为这个请求可以接受，就在 Access-Control-Allow-Origin 头部中回发相同的源信息（如果是公共资源，可以回发"*"）。例如：
Access-Control-Allow-Origin: http://www.nczonline.net

二、图像Ping

思想

1.这里创建了一个 Image 的实例；
2.将 onload 和 onerror 事件处理程序指定为同一个函数。这样无论是什么响应，只要请求完成，就能得到通知；
3.给img实例设置 src 属性就发送了一个请求。

var img = new Image(); 
img.onload = img.onerror = function(){ 
 alert("Done!"); 
}; 
img.src = "http://www.example.com/test?name=Nicholas";

用途及优缺点

图像 Ping 最常用于跟踪用户点击页面或动态广告曝光次数。
图像 Ping 有两个主要的缺点：
1.是只能发送 GET 请求，
2.是无法访问服务器的响应文本。因此，图像 Ping 只能用于浏览器与服务器间的单向通信。

三、jsonp

思想

1.创建一个回调函数，
2.创建script dom 标签
3.设置script 的src属性
4.把script添加到body中

function handleResponse(response){ 
 alert("You’re at IP address " + response.ip + ", which is in " + 
 response.city + ", " + response.region_name); 
} 
var script = document.createElement("script"); 
script.src = "http://freegeoip.net/json/?callback=handleResponse"; 
document.body.insertBefore(script, document.body.firstChild);

用途及优缺点

与图像 Ping 相比，它的优点在于能够直接访问响应文本，支持在浏览器与服务器之间双向通信。
JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码。
要确定 JSONP 请求是否失败并不容易。

跨域学习笔记

原文：https://www.cnblogs.com/superlizhao/p/12662370.html