[聚合文章] 用CORS和JSONP解决跨域问题

CORS

• 客户端可以使用XMLHttpRequest发送请求，请求路径为绝对路径，服务端返回的数据在 xhr.responseText 中
• 如果服务器认为可以接受，就在 Access-Control-Allow-Origin 中返回相应的源或 *
• 克服了AJAX只能同源使用的限制

res.header("Access-Control-Allow-Origin", "*");

JSONP

• 通过使用动态 <script> 实现跨域，在url中指定回调函数
• 能直接访问响应文本，支持浏览器和服务器的双向通信

script.src = "http://www.baidu.com/?callback=handleResponse"
function handleResponse(res){
  //res是服务端返回的数据
}

类似的还有 图像Ping ，因为一个网页可以从任何网页中加载图片，不用担心跨域问题，所以，凡是拥有 src 这个属性的标签都拥有跨域的能力，缺点是无法访问响应文本，适用于浏览器和服务器间的单向通信

let img = new Image();
img.src = "http://"

两者的区别

• JSONP 是 Jquery 提供的跨域方式， JSONP 只支持 get 方式的请求
• CORS 是 W3C 提供的一个跨域标准 ， CORS 支持所有类型的 http 请求

demo地址