vue+spring boot的get请求正常,post跨越问题

在复习旧项目时遇到一个问题,POST请求列表数据报403跨域错误,尝试前端解决方案无效。后来发现是后端配置问题,修改了`config.addAllowedHeader`和`config.addAllowedOrigin`的设置,将它们设为*,允许所有源和请求头,问题得到解决。

最近想复习下几年前写的项目,写到第一个分页查询就出问题了,向后端请求列表数据时,get请求正常,而post请求会报403,跨越问题。刚开始以为是前端的问题,网上搜解决方案大多说是参数传递的问题,试了下qs还是不行,然后用几年前的代码启动,结果也不行,感觉离谱了,几年前能跑,现在不能跑。然后就开始找后端是不是有问题,结果找到了一个配置,和现在网上的配置不一样的地方,改了就行了。
config.addAllowedHeader(““);改成config.addAllowedOrigin(””)

在这里插入图片描述

		// 设置访问源地址
    	config.addAllowedOrigin("*"); 
    	// 设置访问源请求头
    	config.addAllowedHeader("*"); 
在使用 VueSpring Boot 构建的系统中,刷新页面时出现用户自动退出登录的问题通常与身份验证机制的设计有关。以下是几种常见的解决方案: ### 1. 使用 JWT(JSON Web Token)进行无状态身份验证 JWT 是一种轻量级的身份验证和授权机制,特别适合前后端分离的应用。通过在客户端存储 JWT,并在每次请求时将其附加到 HTTP 请求头中,服务器可以验证令牌的有效性而不需要依赖会话。 - **前端处理**:在用户登录成功后,将 JWT 存储在 `localStorage` 或 `sessionStorage` 中。当页面刷新时,检查是否存在有效的 JWT 并重新设置认证状态[^3]。 - **后端处理**:Spring Boot 后端需要配置拦截器来验证每个请求中的 JWT。如果令牌有效,则允许访问受保护的资源;否则返回未授权响应。 ```java // 示例:Spring Boot 中的 JWT 拦截器 public class JwtInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token = request.getHeader("Authorization"); if (token != null && validateToken(token)) { return true; } else { response.sendError(HttpServletResponse.SC_UNAUTHORIZED, "Unauthorized"); return false; } } private boolean validateToken(String token) { // 实现 JWT 验证逻辑 return true; // 假设验证成功 } } ``` ### 2. 使用 Cookie + Session 进行有状态身份验证 如果选择传统的基于会话的身份验证方式,确保后端正确配置了资源共享(CORS),并且前端在发送请求时携带凭据。 - **后端配置**:Spring Boot 应用需要启用 CORS 支持,并允许前端名访问。同时,设置 `withCredentials: true` 以确保浏览器在请求中携带 cookie。 ```java @Configuration @EnableWebMvc public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedOrigins("http://localhost:8080") // 替换为你的前端地址 .allowedMethods("GET", "POST", "PUT", "DELETE") .allowCredentials(true); } } ``` - **前端处理**:在 Axios 请求中设置 `withCredentials: true`,以便在请求中携带 session cookie。 ```javascript // Vue 项目中配置 Axios import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:8081/api', // 替换为你的后端地址 withCredentials: true, }); export default instance; ``` ### 3. 确保 Token 的持久化和刷新机制 对于使用 JWT 的场景,考虑实现一个 token 刷新机制。当用户的访问令牌过期时,可以通过刷新令牌获取新的访问令牌,而无需用户重新登录。 - **前端逻辑**:在检测到访问令牌过期时,向 `/refresh-token` 接口发送请求获取新令牌,并更新本地存储的 token。 - **后端支持**:提供 `/refresh-token` 接口,验证刷新令牌的有效性并返回新的访问令牌。 ```java @RestController @RequestMapping("/auth") public class AuthController { @PostMapping("/refresh-token") public ResponseEntity<String> refreshToken(@RequestBody RefreshTokenRequest request) { String newAccessToken = generateNewAccessToken(request.getRefreshToken()); return ResponseEntity.ok(newAccessToken); } private String generateNewAccessToken(String refreshToken) { // 实现生成新访问令牌的逻辑 return "new-access-token"; } } ``` ### 4. 检查浏览器安全策略 某些浏览器的安全策略可能会阻止请求携带 cookie,特别是在 HTTPS 和 HTTP 混合的情况下。确保前后端都使用相同的协议(例如均为 HTTPS),并且名一致。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值