当前位置:首页 > 每日看点 > 正文内容

既然Nginx能单边解决跨域,那为什么浏览器还要有跨域的存在?

卡卷网1年前 (2025-01-10)每日看点255

上周帮一家公司优化代码时,顺手把跨域的问题解决了,这篇文章,我们聊聊Springoot项目处理跨域的四种技巧。

<>1什么是跨域

我们先看下一个典型的的:

<>同源是指:<>协议、域名、端口号完全相同。

下表给出了与L://training/dir/page.html的源进行对的示例:

当用户通过浏览器访问应用(://.training)时,调用接口的域名非同源域名(://api.training),这是显而易见的跨域场景。

<>2理解CORS

<>CORS是一个W3C标准,全称是"跨域资源共享"(Cross-originresocesharing),它需要浏览器和同时支持他,允许浏览器向跨源发送XMLHttpRequest请求,从而克服AJAX只能<>同源使用的。

<>跨域资源共享标准新增了一组首部字段,允许声明哪些源站通过浏览器有权限访问哪些资源。

规范要求,对那些可能对数据产生副作用的请求方法(特别是GET以外的请求,或者搭配某些MIME类型的POST请求),浏览器必须首先使用OPTIONS方法发起一个预检请求(preflightrequest),从而获知服务端是否允许该跨域请求。

确认允许之后,才发起实际的请求。在预检请求的返回中,端也可以通知客户端,是否需要携带身份凭证(包括Cookies和认证相关数据)。

<>01简单请求

当请求<>同时满足如下条件时,CORS验证机制会使用简单请求,否则CORS验证机制会使用预检请求。

    使用GET、POST、HEAD其中一种方法;只使用了如下的安全首部字段,不得人为设置首部字段;
    AcceptAccept-LanguageContent-LanguageContent-Type仅限三种之一:text/plain,multipart/form-data,application/x-www-form-lencoded:HTML头部headerfield字段:DPR、Download、Se-Data、Viewport-Width、WIdth

    请求中的任意XMLHttpRequestUpload对象均没有注册任何事件;XMLHttpRequestUpload对象可以使用XMLHttpRequest.upload属性访问;请求中没有使用ReadaleStream对象。

简单请求模式,浏览器直接发送跨域请求,并在请求头中携带Origin的头,表明这是一个跨域的请求。端接到请求后,会根据自己的跨域规则,通过Access-Control-Allow-Origin和Access-Control-Allow-Methods响应头,来返回验证结果。

<>02预检请求

浏览器在发现页面发出的请求非简单请求,并不会立即执行对应的请求代码,而是会触发预先请求模式。预先请求模式会先发送preflightrequest(预先验证请求),preflightrequest是一个OPTION请求,用于询问要被跨域访问的,是否允许当前域名下的页面发送跨域的请求。在得到的跨域授权后才能发送正的请求。

OPTIONS请求头部中会包含以下头部:

收到OPTIONS请求后,设置头部与浏览器沟通来判断是否允许这个请求。

如果preflightrequest验证通过,浏览器才会发送正的跨域请求。

<>3Nginx配置

我们可以不用配置Springoot项目,可以在反向层Nginx配置Cros,典型配置如下图:

<>4配置类实现addCorsMapping接口

Springoot中新增一个配置类CorsConfig.ja,继承WeMvcConprAdapter或者实现WeMvcConpr接口,项目启动后,会自动读取配置。

<>5CorsFilter过滤器模式

下图是SpringMvc模式里,过滤器,,的执行顺序。

CorsFilter过滤器模式的优点是:优先级高,可以规避代码中业务异常导致adCorsMappings方法失效的问题。

我们需要定义一个corsFilter方法,@ean注解表示此方法返回一个Springean,该ean将由Spring容器。

corsFilter()方法定义了一个FilterRegistrationean,这个ean是用来注册CorsFilter的,后者用于处理CORS请求。

<>6网关模式

在微服务架构体系中,网关是非常核心的组件。API网关可以做鉴权,限流,灰度等,同时可以配置CORS。内部服务端不用特别关注跨域这个问题。

<>因此假如是SpringCloud体系,我们只需要配置SpringCloudgateway的跨域即可。


    s://developer.mozilla.org/zh-CN/do/We//CORS

扫描二维码推送至手机访问。

版权声明:本文由卡卷网发布,如需转载请注明出处。

本文链接:https://www.kajuan.net/ttnews/2025/01/8443.html

分享给朋友:

相关文章

国内比较好用的快速开发平台有哪些?

国内比较好用的快速开发平台有哪些?

低代码/零代码快速开发平台,一直是近年来很热的一个词,各大巨头的纷纷加入也给这个赛道。题主需要一个能二次开发的低代码快速开发平台,可以试试JVS低代码(私有化)。JVS低代码前端采用Vuex框架和Element-ui组件库,后端则基于Spr...

为什么大家不再提 5G 了?

现在看来,只有美国那种5g的思路是对的。美国的运营商一开始就发现5g和4g并没有质的飞跃,无非就是提升频率/降低穿透力/提升带宽的故事。而美国运营商又是自负盈亏,因此一开始就仅在人口高密度地区或富裕地区布置5g。虽然说人家4g也菜,但是人家...

为什么我感受不到 1500 元的手机比四五千的差?

我长期使用两千元左右的安卓机,一天接近8小时的重度手机使用者。某天我突然想试试看传说中非常赛艇的苹果。狠了心,砸了钱。七千大样买了爱疯。就这?什么辣鸡玩意。而且因为我一直更新软件,用了两年爱疯就卡了。并没有传说中的用四五年不卡。用了这么一次...

网易云音乐上看到过最触动的热评是什么?

网易云音乐上看到过最触动的热评是什么?

1.“昨天晚上洗澡的时候,我忘记拿毛巾了,喊了声妈妈帮我拿下毛巾,正当我伸出左手准备接毛巾的时候,我愣了一下,又换了右手。”希望你永远不会听懂这句话,永远都不要懂。——网易云热评《关键词》2.小时候跟着父亲去城里卖西瓜,害怕同学会看到我,就...

如何评价小米14pro顶配可以选配卫星通话,小米15全系都无法选配?

如何评价小米14pro顶配可以选配卫星通话,小米15全系都无法选配?

雷总不是说了吗,我可以不用,但你不能没有。市面上OPPO Find X8 Pro和vivo X200 Pro的卫星通信版分别加价300,而荣耀Magic7和Magic7 Pro有卫星通信版且不加价,荣耀更显诚意。我觉得有是更好的,虽然使用卫...

为什么闲鱼越做越差?

理想的闲鱼:卖家视角:4000块钱买的手机,用了半年不想用了,挂一个3000块,和买家一顿交流,最后2500块成交,我得到了回血,买家得到了便宜;买家视角:想用一台4000块的手机,但是手里只有2500块,来到闲鱼和卖家一顿交流,最后250...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。