最新消息:本站所有跳转向bbs.ykit.cn的附件将全面停止,附件已转移到https://www.qingsj.com

就是Access-Control-Allow-Origin,跨域

html 有客 159浏览

1、浏览器的同源安全策略

没错,就是这家伙干的,浏览器只允许请求当前域的资源,而对其他域的资源表示不信任。那怎么才算跨域呢?

  1. 请求协议http,https的不同
  2. domain的不同
  3. 端口port的不同

好好好,大概就是这么回事啦,下面我们讲2种中规中矩的办法:CORSJSONP
document.domain,window.name,web sockets就先别闹了,腰不好 : )

2、CORS出来搞事了

这是W3C的大佬们搞出来的标准,全称是”跨域资源共享”(Cross-origin resource sharing)。其实呢,这个大部分还是后端人员的工作。我们先来看看整个流程下,都发生了什么?

在此之前,需要知道简单请求 复杂请求这两个小朋友
  1. 简单请求:
    1): 请求方式只能是:headgetpost
    2): 请求头允许的字段:AcceptAccept-LanguageContent-LanguageLast-Event-ID
    Content-Type:application/x-www-form-urlencoded、multipart/form-data、text/plain 三选一

2.复杂请求:没错,不满足上面的,都是我啦!

简单请求:

浏览器:诶,你小子要跨域是吧,我得问问服务器大哥肯不肯!往请求头添加origin亮一下牌面

有个奇怪现象,谷歌游览器在非跨域情况下,也会发送origin字段

请求头origin字段为当前域

服务器:诶,你是谁,我来看看你的origin,嗯嗯,可以,符合我的要求,放行!顺便告诉你,老夫的规矩!

其中,最重要的就是Access-Control-Allow-Origin,标识允许哪个域的请求。当然,如果服务器不通过,根本没有这个字段,接着触发XHRonerror,再接着你就看到浏览器的提示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,响应头

转载请注明:有客帮 » 就是Access-Control-Allow-Origin,跨域