产生跨域异常的原因

跨域问题一般出现在前后端分离的项目,原因是浏览器有一个叫同源策略的机制,当浏览器检测到我们试图访问不同域的地址时(域名、端口号、协议中有一个不同就算是跨域),会抛出异常。所以跨域问题一般是前端造成的,而后端是不会有跨域问题的。

解决方案

方案一:jsonp

该方案需要前后端都进行编码支持

前端ajax请求

jsonp
设置dataType为jsonp,默认会生成一个名为callback的属性,其值是随机字符串,也可通过jsonp和jsonpCallback指定。

后端处理

jsonp后端
后端处理其实就是作为一个认证,认证这个跨域请求是安全的,允许去访问。

优缺点

优点

能兼容各种浏览器,无兼容问题。

缺点

只支持Get请求,且存在安全问题,不推荐使用

方案二:@CrosOrign

该方案只需要后端处理。需要浏览器支持,且主流的浏览器大都支持。

后端处理

CrosOrign
在后端接口添加@CrosOrign(“跨域地址”)注解,支持当前请求的跨域访问。

方案三:addCorsMappings

该方案可以批量处理跨域请求。需要浏览器支持,且主流的浏览器大都支持。

后端配置

addCorsMappings
在后端实现WebMvcConfigurer接口,重写相应方法,以实现批量处理跨域请求

方案四:配置跨域过滤器

该方案可以对所有请求进行跨域配置。需要浏览器支持,且主流的浏览器大都支持。

后端配置

bean
在后端配置CrosFilter组件,对跨域的来源、请求方式等进行设置。

方案五:Nginx

该方案在前后端都不需要进行处理,只需要在Nginx上进行配置。

Nginx配置

nginx
在浏览器上发送本域请求,在nginx上进行监听,可以根据请求的路径进行路由。例:将http://localhost:8081/cros/的请求路由到http://localhost:8080/user/。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐