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

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

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

上周帮一家公司优化代码时,顺手把跨域的问题解决了,这篇文章,我们聊聊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

分享给朋友:

相关文章

网易云音乐里有哪些打动你的评论?

1.“如果我被强奸了,有人说我会失去贞操。”“我怎么失去贞操了呢?” “我的贞操不在我的阴道里。”“失去贞操的是强奸犯,而不是被强奸的人。”2.但要记得那年海边的烟火,我们不拘一格 ,嘲笑过生活。………网易云热评《这样就很好》3.“ 我们在...

无人机真的是中国领先吗?

无人机真的是中国领先吗?

巧了这是。捡到了一台大疆。应该是别人飞丢的。在草丛中泡过水,轴承锈死,电池鼓涨已,经没有维修价值了。但作为玩电子的,免不了要把它解剖,研究一番。那么,我们看看它的国产化率能有多少吧。图片说话:解释一下吧。图一,高通 美国图二,MPS: 美国...

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

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

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

有哪些是你用上了mac才知道的事?

用上了高端的Mac(已退货)才知道:原来文件夹里面的文件,你看到是8个,其实可能有12个。其中3个图标重叠在一起了,另外一个被拖动到屏幕外面了。用上了高端的Mac(已退货)才知道:原来鼠标灵敏度有问题是因为系统内置了鼠标加速度,只能用控制台...

为什么这次 Mac mini 的 M4 版本价格这么低?

为什么这次 Mac mini 的 M4 版本价格这么低?

扫了一眼这里的回答,目测没几个人真买过 Macbook、Mac mini且真正当主力工作机用过。这个初始(丐版)版本的机器实际谈不上多便宜,备受热捧有几个原因。它这代产品整体做了重新设计,大幅缩减了尺寸,真正称得上 Mini 了。对比前代,...

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

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

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

发表评论

访客

看不清,换一张

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