用CORS和JSONP解决跨域问题

  • 为什么会有跨域问题？
    因为浏览器的同源策略
  • 同源策略是什么？
    协议，域名，端口都相同
  • 如果非同源，会受到什么限制？
    （1） Cookie、LocalStorage 和 IndexDB 无法读取
    （2） DOM 无法获得
    （3） AJAX 请求不能发送

怎样解决非同源发送请求，也就是跨域问题呢，有以下几种方法

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地址

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容