×

CORS 跨域解决方案

前端技术网 前端技术网 发表于2024-01-08 18:41:21 浏览3230 评论0

抢沙发发表评论

一、Spring MVC 的跨域解决方案

一句话:同一个ip、同一个网络协议、同一个端口,三者都满足就是同一个域,否则就是跨域。

CORS 跨域解决方案

基于两个方面:

a. web应用本身是部署在不同的服务器上

b.基于开发的角度---前后端分离

web应用本身是部署在不同的服务器上,对应的域名也就有所不同

比如百度。

主域名:https://www.baidu.com/

CORS 跨域解决方案

二级域名:http://image.baidu.com/, http://music.baidu.com/,http://wenku.baidu.com/

需要在不同的域之间,通过ajax方式互相请求,是非常常见的需求。

Spring 4中增加了对jsonp的原生支持,只需要ControllerAdvice就可以开启,方法如下:

首先新建一个Advice类,我们叫做“JsonpAdvice”,然后在里面定义接收jsonp请求的参数key:

@ControllerAdvice("cn.isy.web.sso.web")指定作用的包名

supper("callback")指定的是url中callback:

http://sso.isy.cn/logout?callback=successCallback

注意:

我们还可以重写AbstractJsonpResponseBodyAdvice中的feforeBodyWriteInternal方法:

做到实现url携带callback就返回jsonp格式,没有就返回正常格式

img

controller中

controller中的代码正常编写就OK,不用修改任何东西。

只要保证在cn.isy.web.sso.web包下即可!

jquery ajax

注意:必须使用jsonp的方式提交请求!

有关cors的介绍可以去详细看一下,这里就不作重复了:

CORS详解

跨资源共享CORS详解

主要配置

使用注解CrossOrigin

在controller类上添加CrossOrigin注解表示当前类中的所有入口函数都

可以实现跨域。也可以指定某个conroller中具体的方法。

img

了解一下这个注解的内容:

img

jquery ajax的写法

注意:这里不用使用jsonp的方式请求普通的ajax即可!,因为浏览器自己可以去做!

CORS全局配置

https://www.jianshu.com/p/d05303d34222

自己试了试没有成功!

资料

解释cors的原理不错 https://zhuanlan.zhihu.com/p/24411090

让自己变得更优秀才可以有更多资源

搜索微信号(ID:芋道源码),可以获得各种 Java源码解析。

并且,回复【书籍】后,可以领取笔者推荐的各种 Java从入门到架构的书籍。

二、浏览器跨域及其解决方案

title:浏览器跨域及其解决方案

author: May

date: 20220428</pre>

什么是跨域跨域的表现解决跨域问题-浏览器设置(不推荐)-前端的非正统解决方式- CORS(跨域资源共享)-配置nginx反向代理

跨域出于浏览器的同源策略限制,同源是指协议、域名、端口都一样,同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。

调用页面时接口数据不返回,控制台中会有红色的报错信息中有类似于 CORS policy关键字。另外,在最新谷歌浏览器中,会有提出类似于loaded over HTTPS此种关键字,均可以考虑为跨域导致。

[图片上传失败...(image-26deed-1651135597111)]

tips:有的时候后台小伙伴使用postman测试好的接口,前端不可以使用,原因就是postman不是浏览器,不会有同源限制,同理移动设备app开发和小程序开发也不会有这个问题。这个不是前端bug,同源限制也不是一个不好的规则。

虽然跨域不是一个不好的事情,但是对于前后端分离的web开发来说确实需要解决的,大致的解决方案可分为:

直接从根源解决问题,让浏览器安全策略不起作用。这个方法虽然可以解决问题但是不现实。

官方正统解决方案, CORS规范允许服务器向浏览器返回一些HTTP Headers,浏览器可以基于这些HTTP Headers来决定是否突破SOP的限制。需要后端配合,浏览器需要什么,接口服务给什么。

nginx是一个高性能的HTTP和反向代理web服务器,nginx用来解决跨域问题的原理与前端非正统解决方式的 proxy的思路是一致的。项目请求接口由nginx服务发出,获取到的数据再经由nginx传递给前端项目,这样前端的请求其实都是由nginx处理的,就没有跨域发生了。

三、使用CORS解决跨域问题

跨域是指跨域名的访问,以下情况都属于跨域:

如果域名和端口都相同,但是请求路径不同,不属于跨域,如:

www.jd.com/item

www.jd.com/goods

跨域不一定会有跨域问题。

因为跨域问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是于当前页同域名的路径,这能有效的阻止跨站攻击。

因此:跨域问题是针对ajax的一种限制。

但是这却给我们的开发带来了不变,而且在实际生成环境中,肯定会有很多台服务器之间交互,地址和端口都可能不同,怎么办?

目前比较常用的跨域解决方案有3种:

我们这里会采用cors的跨域方案。

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。

它允许浏览器向跨源服务器,发出 XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

浏览器会将ajax请求分为两类,其处理方案略有差异:简单请求、特殊请求。

只要同时满足以下两大条件,就属于简单请求。:

(1)请求方法是以下三种方法之一:

(2)HTTP的头信息不超出以下几种字段:

当浏览器发现发现的ajax请求是简单请求时,会在请求头中携带一个字段: Origin.

Origin中会指出当前请求属于哪个域(协议+域名+端口)。服务会根据这个值决定是否允许其跨域。

如果服务器允许跨域,需要在返回的响应头中携带下面信息:

注意:

如果跨域请求要想操作cookie,需要满足3个条件:

不符合简单请求的条件,会被浏览器判定为特殊请求,,例如请求方式为PUT。

特殊请求会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。

浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的 XMLHttpRequest请求,否则就报错。

一个“预检”请求的样板:

与简单请求相比,除了Origin以外,多了两个头:

服务的收到预检请求,如果许可跨域,会发出响应:

除了 Access-Control-Allow-Origin和 Access-Control-Allow-Credentials以外,这里又额外多出3个头:

如果浏览器得到上述响应,则认定为可以跨域,后续就跟简单请求的处理是一样的了。

虽然原理比较复杂,但是前面说过:

事实上,SpringMVC已经帮我们写好了CORS的跨域过滤器:CorsFilter,内部已经实现了刚才所讲的判定逻辑,我们直接用就好了。

在 Application下编写一个配置类,并且注册CorsFilter:

结构:

放到Application下即可。

4.5.4.重启测试:

访问正常:

四、跨域解决方案

解决跨域的方法有:JSONP方式解决跨域、CORS方式解决跨域、搭建Node代理服务器解决跨域、Nginx反向代理解决跨域、postMessage方式解决跨域、Websocket方式解决跨域等。

1、JSONP方式解决跨域

jsonp的原理就是利用了script标签不受浏览器同源策略的限制,然后和后端一起配合来解决跨域问题的。

2、CORS方式解决跨域

cors是跨域资源共享,是一种基于HTTP头的机制,该机制通过允许服务器标示除了它自己以外的其他origin(域,协议和端口),使得浏览器允许这些origin访问加载自己的资源。服务端设置了Access-Control-Allow-Origin就开启了CORS,所以这种方式只要后端实现了CORS,就解决跨域问题,前端不需要配置。

3、搭建Node代理服务器解决跨域

因为同源策略是浏览器限制的,所以服务端请求服务器是不受浏览器同源策略的限制的,因此可以搭建一个node服务器来代理访问服务器。

4、Nginx反向代理解决跨域

nginx通过反向代理解决跨域也是利用了服务器请求服务器不受浏览器同源策略的限制实现的。客户端请求nginx服务器,在nginx.conf配置文件中配置server监听客户端的请求,然后把location匹配的路径代理到真实的服务器,服务器处理请求后返回数据,nginx再把数据给客户端返回。

5、postMessage方式解决跨域

window.postMessage()方法可以安全地实现跨源通信,此方法一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。

6、Websocket方式解决跨域

使用Websocket也可以解决跨域问题,因为WebSocket本身不存在跨域问题,所以我们可以利用webSocket来进行非同源之间的通信,WebSocket规范定义了一个在Web浏览器和服务器之间建立“套接字”连接的API。简单来说:客户端和服务器之间存在持久连接,双方可以随时开始发送数据。

感谢您的阅读!希望本文对解决您关于CORS 跨域解决方案的问题有所帮助。如果您还有其他疑问,欢迎随时向我们提问。