跨域问题 约定不等于承诺〃 2021-09-28 14:54 438阅读 0赞 ## 1、浏览器的同源安全策略 ## 没错,就是这家伙干的,浏览器只允许请求当前域的资源,而对其他域的资源表示不信任。那怎么才算跨域呢? 1. 请求协议`http,https`的不同 2. 域`domain`的不同 3. 端口`port`的不同 好好好,大概就是这么回事啦,下面我们讲2种中规中矩的办法:`CORS`,`JSONP` document.domain,window.name,web sockets就先别闹了,腰不好 : ) ## 2、CORS出来搞事了 ## 这是W3C的大佬们搞出来的标准,全称是"跨域资源共享"(Cross-origin resource sharing)。其实呢,这个大部分还是后端人员的工作。我们先来看看整个流程下,都发生了什么? 在此之前,需要知道`简单请求` `复杂请求`这两个小朋友 1. 简单请求: 1): 请求方式只能是:`head`,`get`,`post` 2): 请求头允许的字段:`Accept`,`Accept-Language`,`Content-Language`,`Last-Event-ID` `Content-Type`:application/x-www-form-urlencoded、multipart/form-data、text/plain 三选一 2.复杂请求:没错,不满足上面的,都是我啦! 简单请求: 浏览器:诶,你小子要跨域是吧,我得问问服务器大哥肯不肯!往请求头添加`origin`亮一下牌面 `有个奇怪现象,谷歌游览器在非跨域情况下,也会发送origin字段` ![Image 1][] 请求头origin字段为当前域 服务器:诶,你是谁,我来看看你的origin,嗯嗯,可以,符合我的要求,放行!顺便告诉你,老夫的规矩! ![Image 1][] 其中,最重要的就是`Access-Control-Allow-Origin`,标识允许哪个域的请求。当然,如果服务器不通过,根本没有这个字段,接着触发`XHR`的`onerror`,再接着你就看到浏览器的提示`xxx的服务器没有响应Access-Control-Allow-Origin字段` //指定允许其他域名访问 'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法(*,指定域,动态设置),3是因为*不允许携带认证头和cookies //是否允许后续请求携带认证信息(cookies),该值只能是true,否则不返回 'Access-Control-Allow-Credentials:true' 上面第一行说到的`Access-Control-Allow-Origin`有多种设置方法: 1. 设置`*`是最简单粗暴的,但是服务器出于安全考虑,肯定不会这么干,而且,如果是\*的话,游览器将不会发送`cookies`,即使你的`XHR`设置了`withCredentials` 2. 指定域,如上图中的`http://172.20.0.206`,一般的系统中间都有一个`nginx`,所以推荐这种 3. 动态设置为请求域,多人协作时,多个前端对接一个后台,这样很方便 `withCredentials`:表示`XHR`是否接收cookies和发送cookies,也就是说如果该值是false,响应头的`Set-Cookie`,浏览器也不会理,并且即使有目标站点的cookies,浏览器也不会发送。 复杂请求: 最常见的情况,当我们使用`put`和`delete`请求时,浏览器会先发送`option`(预检)请求,不过有时候,你会发现并没有,这是后面我们会讲到缓存。 预检请求 与简单请求不同的是,option请求多了2个字段: `Access-Control-Request-Method`:该次请求的请求方式 `Access-Control-Request-Headers`:该次请求的自定义请求头字段 服务器检查通过后,做出响应: //指定允许其他域名访问 'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法(*,指定域,动态设置),3是因为*不允许携带认证头和cookies //是否允许后续请求携带认证信息(cookies),该值只能是true,否则不返回 'Access-Control-Allow-Credentials:true' //预检结果缓存时间,也就是上面说到的缓存啦 'Access-Control-Max-Age: 1800' //允许的请求类型 'Access-Control-Allow-Methods:GET,POST,PUT,POST' //允许的请求头字段 'Access-Control-Allow-Headers:x-requested-with,content-type' 这里有个注意点:`Access-Control-Request-Method`,`Access-Control-Request-Headers`返回的是满足服务器要求的所有请求方式,请求头,不限于该次请求,`我一次性告诉你了,别TM问我了` ## 3、大家好,我是渣渣辉,是兄dei就来...呸呸呸,我是JSONP ## 好啦,jsonp的原理:通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入,有种回调的味道! 例子: <script src="http://example.com/data.php?callback=dosomething"></script> <script type="text/javascript"> function dosomething(jsondata){ //处理获得的json数据 } </script> jquery用法 <script type="text/javascript"> $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){ //处理获得的json数据 }; </script> JSONP的优缺点 优点:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的`兼容性更好`,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。 缺点:它只支持`GET`请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。 [Image 1]:
相关 【跨域】如何解决跨域问题 同源策略 同源 相同协议+相同域名+相同端口 内容 [浏览器的同源策略 - Web 安全 | MDN (mozilla.org)][- Web _ _ 超、凢脫俗/ 2024年03月16日 13:32/ 0 赞/ 124 阅读
相关 跨域、跨域问题 跨域(CORS)是一种允许当前域(domain)的资源(比如html/js/web service)被其他域(domain)的脚本请求访问的机制,通常由于同域安全策略(the 朴灿烈づ我的快乐病毒、/ 2023年09月27日 00:59/ 0 赞/ 194 阅读
相关 跨域问题 跨域问题 跨域 请求协议不一致导致 IP地址的不一致导致 端口不一致导致 跨域 跨域问题普遍存在前后端分离得开发模式 我会带着你远行/ 2022年12月20日 01:57/ 0 赞/ 215 阅读
相关 跨域问题 跨域问题: 通过一个地址去访问另一个地址,这个过程中如果有三个地方任何一个不一样,都会有跨域问题 访问协议:http https ip地址 192.168.1.1 冷不防/ 2022年11月17日 14:49/ 0 赞/ 248 阅读
相关 跨域问题 要解决跨域问题先来看看什么是同源策略。 同源策略 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源。 下表给出了相对`http://s 川长思鸟来/ 2022年03月12日 06:27/ 0 赞/ 313 阅读
相关 跨域问题 确实,我们这种搬砖工人就是为了混口饭吃嘛,好好的调个接口告诉我跨域了,这种阻碍我们轻松搬砖的事情真恶心!为什么会跨域?是谁在搞事情?为了找到这个问题的始作俑者,请 ゝ一世哀愁。/ 2022年01月14日 13:01/ 0 赞/ 352 阅读
相关 跨域问题 跨域是个老生常谈的跨题。今天在我们后端的帮助和配合下,对跨域又多了一层认识。感觉对于每件事,只要是从3个方面(what,why,how)去理解,都会对其有个基本(70 r囧r小猫/ 2022年01月06日 13:43/ 0 赞/ 326 阅读
相关 跨域问题 1、浏览器的同源安全策略 没错,就是这家伙干的,浏览器只允许请求当前域的资源,而对其他域的资源表示不信任。那怎么才算跨域呢? 1. 请求协议`http,https`的 约定不等于承诺〃/ 2021年09月28日 14:54/ 0 赞/ 439 阅读
相关 跨域问题 一.http (一).http请求的推演过程 1. url(www.baidu.com) =>进行DNS域名解析 => 得到 ip (192.1 一时失言乱红尘/ 2021年09月03日 08:04/ 0 赞/ 695 阅读
相关 跨域问题 使用vue访问springboot java后台api时候,出现错误: 已拦截跨源请求:同源策略禁止读取位于 https://xxxxi/xxx/xx/xxxi/ad 痛定思痛。/ 2021年09月01日 04:42/ 0 赞/ 521 阅读
还没有评论,来说两句吧...