前后端分离的Springboot项目解决跨域问题

相信很多朋友在写前后端分离的项目时候,前端项目向后端发请求抓数据时肯定会遇到跨域问题。最近我自己也遇到了这个问题今天就是来分享一下解决的方法。
首先,我在这里先说明一下。我这边的前端项目使用的是Vue框架搭配Element-UI后端是Springboot框架。

遇到的情况就是在前端使用Element-UI表单组件里进行表单提交向后端发请求时遇到了的跨域问题
下面是前端表单提交的代码

<script>
submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log("submit")
                        this.$axios.get("http://localhost:9000/Client/hello"
                        ).then( (rep) => {
                            if(rep.data == "hello"){

                                alert('submit!');
                            }else {
                                alert("账号或者密码错误")
                            }
                            console.log(rep)
                        })
                    } else {
                        console.log('error submit!!');
            
### 关于Spring BootVue.js前后端分离架构中的问题解决方案 #### 后端配置CORS支持 在Spring Boot应用程序中,可以通过多种方式来启用共享(CORS),从而允许来自其他名的请求。一种常见做法是在控制器级别或全局范围内应用`@CrossOrigin`注解[^1]。 另一种更灵活的方法是通过Java配置类实现自定义的CorsConfigurationSource bean: ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 对所有路径生效 .allowedOrigins("*") // 允许任何来访问(生产环境建议指定具体地址) .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .maxAge(3600); // 预检请求的有效期为一小时 } } ``` 此方法能够精确控制哪些URL模式、HTTP动词以及原点被授权进行通信,并且还可以设置预检请求的最大有效期以减少不必要的握手次数[^2]。 #### 前端调整Axios默认选项 对于基于Vue.js构建的应用程序来说,在发起AJAX请求之前修改axios库的基础配置也是一种有效的手段。可以在项目的入口文件(main.js或其他合适位置)加入如下代码片段: ```javascript import axios from 'axios'; // 设置公共参数 axios.defaults.baseURL = 'http://localhost:8181'; // 后端API服务器地址 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; axios.defaults.withCredentials = true; // 如果需要携带cookie则开启此项 ``` 上述操作不仅简化了每次发送请求时重复输入基础URL的过程,同时也确保了即使存在多个异步调用也能统一管理认证凭证等问题[^3]。 #### 浏览器开发者工具排查 当遇到实际运行过程中仍然存在的错误提示时,利用浏览器内置的开发者工具(F12键打开),特别是Network面板下的XHR标签页,可以帮助快速定位并解决问题所在。注意观察响应头(Response Headers)部分是否存在Access-Control-Allow-Origin字段及其对应的值是否符合预期设定。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jay-Code

程序路上小白一枚相互分感谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值