跨域的相关

什么是同源策略

同域名,同端口,同协议视为同一个域,浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源

什么是跨域?跨域有几种实现形式

需要访问不同域的资源,就叫跨域

跨域的实现几种实现形式及原理:
  • JSONP的跨域方式
    html中script标签可以引入其他域下的js,比如引入线上的jquery库。利用这个特性,可实现跨域访问接口
    需要后端支持
    服务器愿意提供接口
    数据返回前需要提前定义好数据处理函数
    创建script标签,src的地址执行后端接口,最后加个参数callback=数据处理函数名这个参数可以让返回的数据以数据处理函数名(data)的字符串形式输出,以此调用数据处理函数
  • CORS的跨域请求方式
    使用 XMLHttpRequest 发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin,后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头Access-Control-Allow-Origin 浏览器判断该相应头中是否包含 Origin 的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据。
    res.header('Access-Control-Allow-Origin','(此处输入同意对象的URL)')
  • 使用降域进行跨域
    操作iframe
    window.frames[0].document.querySelector('input').value='xxx'获取iframe里面的输入框后对其赋值,当子域名不同时不能进行操作,因此需要进行降域
    document.domain=''降到相同的父域名,且主域名必须相同
  • postmessage实现跨域
    window.postMessage(message,targetOrigin)方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 跨域是什么 同源策略 在讲解什么是跨域之前先要清楚什么是同源策略,“同源政策”(same-origin polic...
    JRG_Orange阅读 4,535评论 0 52
  • 前言:对于跨域请求,很早之前就有去了解过,但因为一直关注的都是服务器后端开发,故也就仅仅停留在概念的理解上而没有机...
    ken_ljq阅读 90,064评论 6 128
  • 跨域问题的场景和解决方案多种多样,只要是做前端开发,总会遇到。而且面试时也是必问的问题。所以自己学习总结记录一下。...
    花开_陈凤娟阅读 4,017评论 0 0
  • 一、浏览器的同源策略 1.什么是同源? 所谓“同源”指的是”三个相同“。相同的域名、端口和协议,这三个相同的话就视...
    徐国军_plus阅读 4,314评论 1 3
  • 不管是生活还是工作快乐都应该是核心点;生活中大部分人,因为工作的不开心反复辗转睡不着,同样如果生活要不开心,也会直...
    好像音乐浮在水上阅读 9,717评论 0 2