如何通过Axios向Spring Boot应用发送JWT请求头？

你遇到的是**跨域资源共享(CORS)**相关的问题——浏览器的安全策略限制了自定义请求头的传递，而Postman不受浏览器CORS规则约束，所以能正常工作。下面是具体的原因分析和解决办法：

问题根源 #

当前端通过浏览器发送带自定义请求头（比如你的jwt头）的跨域请求时，浏览器会先发送一个OPTIONS预检请求，询问后端是否允许这个自定义请求头。你后端的@CrossOrigin("*")注解默认只放行标准请求头，没有明确允许jwt这个自定义头，导致浏览器拦截了后续的实际请求，最终后端收不到jwt头。

解决方案 #

方案1：修改控制器的@CrossOrigin注解，明确放行jwt头 #

直接在LoginController上更新@CrossOrigin注解，指定允许的自定义请求头：

@CrossOrigin(origins = "*", allowedHeaders = "jwt")
@RestController
public class LoginController {
  @RequestMapping("/logout")
  public ResponseEntity<JsonResponseBody> logoutUser(@RequestHeader(value="jwt") String jwt, HttpServletRequest request){
    System.out.println("My jwt is: "+jwt);
    // 建议返回匹配JsonResponseBody格式的响应体，避免空响应
    return ResponseEntity.status(HttpStatus.OK).body(new JsonResponseBody(HttpStatus.OK.value(), "Logout successful"));
  }
}

方案2：全局配置CORS（推荐） #

如果你的应用有多个接口需要跨域，全局配置能避免重复设置，更易维护：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class GlobalCorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 对所有接口路径生效
                .allowedOrigins("*") // 生产环境建议替换为具体前端域名，比如"https://your-frontend.com"
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许所有HTTP方法，包括预检用的OPTIONS
                .allowedHeaders("jwt", "Content-Type") // 放行jwt头和标准Content-Type头
                .allowCredentials(true); // 如果需要携带Cookie等凭证，开启此选项（可选）
    }
}

前端额外检查 #

发送请求前先确认localvariable的有效性，避免因token为空导致的问题：

console.log("当前JWT Token:", localvariable); // 确保值不为空或undefined
axios.get('URL/logout', { headers: { jwt: localvariable } } )
  .then(response => {
    console.log('Response of logout', response);
    this.setState({isLogged: false});
    console.log('Status after logout', this.state);
  })
  .catch(error => {
    console.log(error);
  });

补充说明 #

• Postman能正常工作是因为它不属于浏览器环境，不会触发CORS预检机制，直接发送了包含jwt头的请求。
• 生产环境中不要使用allowedOrigins("*")，请指定具体的前端域名，提升应用安全性。

内容的提问来源于stack exchange，提问作者M_Lude