Ajax+SpringBoot测试前后端分离,解决跨域问题

解决SpringBoot跨域问题
本文分享了在使用SpringBoot开发前后端分离项目时遇到的跨域问题及解决过程。作者详细描述了从配置WebMvcConfigurer到使用@CrossOrigin注解的尝试,最终发现引入spring-boot-starter-security导致问题,并找到了正确的依赖。

这两天用springboot和js做一个前后端分离的小项目,遇到了跨域问题

具体问题描述如下:

本地文件 register.html 中通过ajax向后台发起GET/POST请求实现一个简单的注册功能,分为两步:

  1. 发送手机号,获取验证码
  2. 填写信息,提交注册

遇到的问题是,

浏览器控制台显示:

POST http://localhost:9000/user/register/otp/code 401
Access to XMLHttpRequest at 'http://localhost:9000/user/register/otp/code' 
from origin 'null' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

在这里插入图片描述
百度之后,大概知道是跨域问题,网上也有很多解决办法,一一尝试

第一种是从springboot1.x到2.x依旧采用的增加自定义WebMvcConfig

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 拦截所有请求
        registry.addMapping("/**")
                // 允许返回cookie
                .allowCredentials(true)
                .allowedHeaders("*")
                // 允许所有来源(解决跨域问题)
                .allowedOrigins("*")
                .allowedMethods("*");
    }
}

最终结果:没有解决

第二种方式是,使用新版springboot给出的注解

@CrossOrigin
org.springframework.web.bind.annotation.CrossOrigin

在这里插入图片描述
在这里插入图片描述
还是老样子没有解决

第三种:csdn上一篇博客给出的解决方案
在这里插入图片描述
此方式我并未尝试,因为在下面我找到了根本问题

第四种

我在脚本之家上看到一篇文章,博主遇到的错误和我一样,阅读完发现我也是因为引入了spring-boot-starter-security这个jar包
在这里插入图片描述
之所以引入它,是因为我在进行注册信息保存操作时要对密码进行加密,使用了

org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;

这个类(BCryptPasswordEncoder使用SHA-256+随机盐+密钥把用户输入的密码进行hash处理, 得到密码的hash值,不可逆,盐值不同,hash解雇不同。使用SecureRandom生成的强(安全)随机数作为盐进行加密,不需要我们去记录这个盐,因为它会直接混在加密后的密码串中)

但其实,我只需要引入

        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-crypto</artifactId>
            <version>5.2.1.RELEASE</version>
            <scope>compile</scope>
        </dependency>

即可,而不应该引入spring security和springboot的整合包。

到此,问题就解决了

总结:

因为我第一次遇见跨域问题,也没有阅读springboot源码,所以我对于问题的产生并不是很了解,只能先记下此次问题,给出几个解决方案,至于根本原因和底层理,之后再深入研究吧!

### 关于Spring Boot和Vue.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字段及其对应的值是否符合预期设定。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值