前后端分离项目跨域请求解决方案
跨域问题一般出现在前后端分离的项目,原因是浏览器有一个叫同源策略的机制,当浏览器检测到我们试图访问不同域的地址时(域名、端口号、协议中有一个不同就算是跨域),会抛出异常。所以跨域问题一般是前端造成的,而后端是不会有跨域问题的。
产生跨域异常的原因
跨域问题一般出现在前后端分离的项目,原因是浏览器有一个叫同源策略的机制,当浏览器检测到我们试图访问不同域的地址时(域名、端口号、协议中有一个不同就算是跨域),会抛出异常。所以跨域问题一般是前端造成的,而后端是不会有跨域问题的。
解决方案
方案一:jsonp
该方案需要前后端都进行编码支持
前端ajax请求

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

后端处理其实就是作为一个认证,认证这个跨域请求是安全的,允许去访问。
优缺点
优点
能兼容各种浏览器,无兼容问题。
缺点
只支持Get请求,且存在安全问题,不推荐使用
方案二:@CrosOrign
该方案只需要后端处理。需要浏览器支持,且主流的浏览器大都支持。
后端处理

在后端接口添加@CrosOrign(“跨域地址”)注解,支持当前请求的跨域访问。
方案三:addCorsMappings
该方案可以批量处理跨域请求。需要浏览器支持,且主流的浏览器大都支持。
后端配置

在后端实现WebMvcConfigurer接口,重写相应方法,以实现批量处理跨域请求
方案四:配置跨域过滤器
该方案可以对所有请求进行跨域配置。需要浏览器支持,且主流的浏览器大都支持。
后端配置

在后端配置CrosFilter组件,对跨域的来源、请求方式等进行设置。
方案五:Nginx
该方案在前后端都不需要进行处理,只需要在Nginx上进行配置。
Nginx配置

在浏览器上发送本域请求,在nginx上进行监听,可以根据请求的路径进行路由。例:将http://localhost:8081/cros/的请求路由到http://localhost:8080/user/。
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)