[转帖]没错,就是Access-Control-Allow-Origin,跨域

没错,就是,access,control,allow,origin · 浏览次数 : 0

小编点评

**1、浏览器的同源安全策略没错,就是 totul干的,浏览器只允许请求当前域的资源,而对其他域的资源表示不信任。** **2、CORS (Cross-origin Resource Sharing):**W3C的大佬们搞出来的标准,全称是\"跨域资源共享\"(Cross-origin resource sharing)。它允许跨域请求中,允许一个域访问另一个域的资源。 **3、CORS 的流程:** - 请求头包含“Access-Control-Allow-Origin”字段,指定允许访问的域。 - 如果服务器不通过,则触发XHR的onerror,再接着你就看到浏览器的提示xxx的服务器没有响应Access-Control-Allow-Origin字段。 **4、CORS 的设置方法:** - 设置*:最简单粗暴的方法,但服务器出于安全考虑,肯定不会这么干,而且,如果是*的话,游览器将不会发送cookies,即使你的XHR设置了withCredentials指定域,如上图中的http://172.20.0.206,一般的系统中间都有一个nginx,所以推荐这种动态设置为请求域,多人协作时,多个前端对接一个后台,这样很方便withCredentials。 - 设置*时浏览器只发送请求头的“Access-Control-Allow-Origin”字段,而不会发送其他请求头,例如“Content-Type”。 - 设置*时浏览器只发送GET请求,不能支持POST请求。 - 设置*时浏览器只发送可接受的请求方式,例如“Access-Control-Allow-Methods:GET,POST”。 - 设置动态域名时,浏览器会根据域名动态设置“Access-Control-Allow-Origin”。

正文

https://www.jianshu.com/p/89a377c52b48/

 

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,响应头的Set-Cookie,浏览器也不会理,并且即使有目标站点的cookies,浏览器也不会发送。

复杂请求:

最常见的情况,当我们使用putdelete请求时,浏览器会先发送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-MethodAccess-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调用的问题。

好啦,大概就是这个样子啦,本文中大部分思路取自阮一峰老师 跨域资源共享 CORS 详解,当初学习的时候,也是看阮一峰老师的文章。

与[转帖]没错,就是Access-Control-Allow-Origin,跨域相似的内容:

[转帖]没错,就是Access-Control-Allow-Origin,跨域

https://www.jianshu.com/p/89a377c52b48/ 1、浏览器的同源安全策略 没错,就是这家伙干的,浏览器只允许请求当前域的资源,而对其他域的资源表示不信任。那怎么才算跨域呢? 请求协议http,https的不同 域domain的不同 端口port的不同 好好好,大概就是

[转帖]INTEL MLC(Memory Latency Checker)介绍

https://zhuanlan.zhihu.com/p/359823092 在定位机器性能问题的时候,有时会觉得机器莫名其妙地跑的慢,怎么也看不出来问题。CPU频率也正常,程序热点也没问题,可就是慢。这时候可以检查一下内存的访问速度,看看是不是机器的内存存在什么问题。Intel Memory La

[转帖]AMD Zen4 霄龙 9004 转战嵌入式:192 框框无敌!秒杀对手 80%

http://www.myzaker.com/article/64104f50b15ec02eb10eb659 其实,它就是把此前用于服务器、数据中心的霄龙 9004 系列的部分型号拿了过来,命名、规格一点都没改,只是在重点技术、服务上有所区别。 嵌入式霄龙 9004 系列当然还是 Zen4 架构,

[转帖]Prometheus监控系统存储容量优化攻略,让你的数据安心保存!

云原生监控领域不可撼动,Prometheus 是不是就没缺点?显然不是。 一个软件如果什么问题都想解决,就会导致什么问题都解决不好。所以Prometheus 也存在不足,广受诟病的问题就是 单机存储不好扩展。 1 真的需要扩展容量吗? 大部分场景其实不需要扩展,因为一般的数据量压根达不到 Prome

[转帖]深入理解mysql-第六章 mysql存储引擎InnoDB的索引-B+树索引

一、引入索引 在没有索引的情况下,不论是根据主键列或者其他列的值进行查找,由于我们并不能快速的定位到记录所在的页,所以只能从第一个页沿着双向链表一直往下找,因为要遍历所有的数据页,时间复杂度就是O(n),所以这种方式显然是超级耗时的。所以我们需要采取一定的数据结构来存储数据,方便我们进行数据的增删改

[转帖]Redis 运维实战 第02期:Redis Cluster

https://cloud.tencent.com/developer/article/1986819 Redis 最为突出的特性就是:执行命令的速度非常快(原因是所有数据都存放在内存中)。但是单机 Redis 总会遇到瓶颈的,比如:并发、流量、内存等。在 Redis 3.0 之前,官方并没有提供集

[转帖]Springboot 集成 micrometer(actuator/prometheus) 接口报 404

https://blog.csdn.net/qq_26545503/article/details/123313891 原因 主要是spring-boot版本和micrometer版本没有对应上,我用的spring-boot是2.6.0对应的micrometer就是1.8 需要修改两个地方 pom.

[转帖]redis脑裂是什么?如何解决

这也是一个常见面试题,对redis集群部署不熟悉的同学,可能压根没听过这个名词qvq 什么是redis脑裂 下面我们解释一下什么是redis脑裂: 关于reids集群会由于网络等原因出现脑裂的情况,所谓的集群脑裂就是,由于redis master节点和redis salve节点和sentinel处于

[转帖]sp_change_users_login

https://www.cnblogs.com/jenneyblog/archive/2013/03/21/sp_change_users_login.html 孤立帐户,就是某个数据库的帐户只有用户名而没有登录名,这样的用户在用户库的sysusers系统表中存在,而在master数据库的syslo

【转帖】nginx变量使用方法详解-7

https://www.diewufeiyang.com/post/581.html 在 (一) 中我们提到过,Nginx 变量的值只有一种类型,那就是字符串,但是变量也有可能压根就不存在有意义的值。没有值的变量也有两种特殊的值:一种是“不合法”(invalid),另一种是“没找到”(not fou