springboot解决CORS 跨域问题,options请求出现403

和同学参加比赛前后端分离,今天我对接的时候,发现前端的请求后端一直接收不到,出现这种问题

明明代码请求是post结果发现控制台的细节发现请求是options,于是查了一下网上的原因

因为请求是跨域,所以会先发一个options看看支不支持跨域,如果服务器支持跨域才会发原来的请求。

然后本身我的后端代码并没有配置相关跨域的信息,所以不能支持跨域第二个正常的请求就不会再发了,最后只要将后端的Controller类上加一个注解

@CrossOrigin(origins = "http://127.0.0.1:8080")
//origins ="允许跨域访问的协议+ip+端口"
//如果想设置所有地址都可以跨域设置成origins ="*"

此时在进行访问接口就可以。

有个坑!!!

中间有个细节就是本地测试的时候前端网址如果ip是localhost的话

后端注解origins的值必须是“localhost”像这样使用127.0.0.1也不行

@CrossOrigin(origins = "http://127.0.0.1:8080")会等于没有配置。

<think>好的,我现在需要帮助用户解决关于Vue与Spring Boot项目中常见的登录错误及解决方法的问题。首先,我需要回想一下常见的登录问题可能出现在哪里,以及如何结合前后端来分析。 首先,用户提到的登录错误可能涉及问题。因为在前后端分离的项目中,前端Vue和后端Spring Boot通常运行在不同的端口,请求如果不正确配置,会导致登录请求被浏览器拦截。这时候需要检查Spring BootCORS配置是否正确。比如用户提供的引用[1]中提到,要解决allowCredentials和allowedOrigins中不能使用通配符的问题,必须明确指定允许的源,并且设置allowCredentials为true。这可能是一个常见的错误点。 接下来,用户认证失败也是一个常见问题。比如用户输入的用户名或密码错误,或者后端没有正确处理认证逻辑。这时候需要检查Spring Security或Shiro的配置是否正确,比如密码加密方式是否前后端一致,用户信息是否正确从数据库查询。引用[3]提到使用Shiro进行用户信息加密和登录认证,可能涉及到密码加密算法的匹配问题,比如前端是否对密码进行了正确的加密,后端是否正确解密验证。 另外,前端保存Token的问题也不容忽视。比如在Vue中,登录成功后后端返回的Token可能没有正确保存到localStorage或Vuex中,导致后续请求没有携带Token,从而认证失败。此外,Token过期处理也是一个需要注意的地方,前端需要检查Token的有效期并在过期时跳转到登录页面。 网络请求配置错误也可能导致登录问题。例如,前端在发送登录请求时,可能没有正确设置Content-Type为application/json,或者请求的URL路径与后端接口不匹配。需要检查axios的配置,确保baseURL正确,请求头和参数正确。 还有可能后端接口权限配置错误,比如未正确开放登录接口的访问权限,导致403 Forbidden错误。在Spring Security中,需要确保/login路径已经被允许匿名访问,不会被拦截。 此外,用户提到的引用[2]中的项目可能是一个前后端分离的模板,可能存在一些特定的配置需要参考。比如检查前端请求的API地址是否正确指向后端,或者是否配置了代理来解决问题。比如引用[4]提到代理作为独立进程运行,可能涉及到前端配置代理到后端端口,避免问题。 总结下来,常见的错误可能包括配置错误、认证逻辑问题、Token处理不当、网络请求配置错误以及权限配置问题。针对每个问题,需要分别检查前后端的相关配置和代码逻辑,确保每一步都正确无误。例如,检查CORS配置是否允许了前端源,是否携带凭证;检查密码加密是否一致;检查Token的存储和携带;确认接口路径和权限设置等。 在解决问题时,可以按照步骤逐一排查:首先确认问题是否存在,通过浏览器开发者工具查看网络请求是否被拦截;然后检查登录接口的响应,确认返回的Token是否正确;接着查看后端日志,确认是否有异常抛出;最后检查前端代码,确保请求参数和配置正确。通过这样的分步骤排查,可以有效地定位并解决登录过程中的常见错误。</think>### Vue + Spring Boot 登录常见错误及解决方案 #### 1. 请求拦截(CORS问题) **现象**:前端发送登录请求时,浏览器控制台显示错误(如 `CORS policy blocked`)。 **原因**:后端未正确配置资源共享(CORS),或前端请求未携带凭证。 **解决方案**: - 在Spring Boot中配置CORS,明确指定允许的源(非通配符*)并启用凭证: ```java @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:8080") // 前端地址 .allowCredentials(true) // 允许凭证 .allowedMethods("*"); } }; } ``` - 前端axios请求需设置 `withCredentials: true`[^1]: ```javascript axios.post('/api/login', data, { withCredentials: true }) ``` --- #### 2. 用户认证失败(401/403错误) **现象**:登录接口返回401(未授权)或403(禁止访问)。 **原因**: - 用户名/密码错误 - 后端未正确配置权限(如未开放登录接口匿名访问) - 密码加密方式前后端不一致(如使用Shiro加密时)[^3] **解决方案**: - **检查Spring Security配置**: ```java @Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers("/api/login").permitAll() // 开放登录接口 .anyRequest().authenticated(); } ``` - **统一加密方式**: 前端使用相同算法(如MD5/SHA-256)加密密码,后端Shiro配置匹配的加密器: ```java @Bean public HashedCredentialsMatcher credentialsMatcher() { HashedCredentialsMatcher matcher = new HashedCredentialsMatcher(); matcher.setHashAlgorithmName("SHA-256"); return matcher; } ``` --- #### 3. Token未正确传递 **现象**:登录成功后,后续请求仍提示未认证。 **原因**:前端未保存Token或未在请求头中附加Token。 **解决方案**: - **前端保存Token**(Vue示例): ```javascript // 登录成功后 localStorage.setItem('token', response.data.token); // 设置axios全局请求头 axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token'); ``` - **后端验证Token**: 确保Spring Security或Shiro已配置JWT过滤器,并校验请求头中的Token。 --- #### 4. 网络请求配置错误 **现象**:登录请求返回404或500错误。 **原因**: - 前端请求URL与后端接口路径不匹配 - 未正确设置请求头(如 `Content-Type: application/json`) **解决方案**: - **检查axios的baseURL配置**: ```javascript axios.defaults.baseURL = 'http://localhost:8080/api'; // 后端API地址 ``` - **明确请求头类型**: ```javascript axios.post('/login', { username, password }, { headers: { 'Content-Type': 'application/json' } }) ``` --- #### 5. 会话状态丢失 **现象**:刷新页面后登录状态失效。 **原因**:前端使用Vuex存储登录状态但未持久化。 **解决方案**: - **持久化存储登录状态**: ```javascript // 结合Vuex和localStorage const store = new Vuex.Store({ state: { isLoggedIn: localStorage.getItem('token') !== null }, mutations: { login(state) { state.isLoggedIn = true; localStorage.setItem('token', '...'); } } }); ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值