Spring Boot+React对接Spotify API出现CORS策略错误如何解决？

为什么@CrossOrigin注解没有生效？ #

你配置的@CrossOrigin以及全局CORS规则本身是正常生效的，触发CORS报错和该注解没有关系：

• 你的/artist接口设置了登录校验，当用户未完成Spotify授权登录时，Spring Security OAuth2 SSO的默认逻辑会直接返回302重定向响应，引导用户跳转到Spotify的授权页面。
• 你在Postman、浏览器地址栏直接访问/artist时，属于浏览器顶层页面跳转，不会触发CORS校验，整个授权、回调流程可以正常跑完。
• 但你在React里用fetch发起的是跨域异步AJAX请求，浏览器收到302响应后会自动向Spotify的授权地址发起请求，而Spotify的授权接口本身没有返回允许http://localhost:3000跨域的响应头，所以最终的CORS报错是Spotify侧返回的，和你Spring Boot的CORS配置无关。

解决方案 #

• 方案1：调整授权交互流程
  不要直接用fetch异步请求需要登录的接口，先引导用户点击按钮顶层跳转至http://localhost:8080/login完成Spotify授权登录，回调完成回到前端页面后，再发起fetch请求/artist接口，此时不会触发重定向，CORS规则也可以正常生效。
• 方案2：修改Spring Security未授权返回逻辑
  调整安全配置，让异步请求未登录时返回401状态码而非302重定向，前端收到401后再主动跳转授权：

  @Override
  protected void configure(HttpSecurity http) throws Exception {
      http.authorizeRequests().antMatchers("/test").authenticated();
      http.authorizeRequests().antMatchers("/artist").authenticated();
      http.authorizeRequests().antMatchers("/login").authenticated();
      http.authorizeRequests().antMatchers("/login/*").authenticated();
      // 新增未授权请求处理逻辑
      http.exceptionHandling()
          .authenticationEntryPoint((request, response, authException) -> {
              // 识别异步AJAX请求返回401，普通页面请求继续走重定向
              String xRequestedWith = request.getHeader("X-Requested-With");
              boolean isAjax = "XMLHttpRequest".equals(xRequestedWith) 
                              || (request.getHeader("Accept") != null && request.getHeader("Accept").contains("application/json"));
              if (isAjax) {
                  response.sendError(HttpServletResponse.SC_UNAUTHORIZED);
              } else {
                  response.sendRedirect("/login");
              }
          });
      http.cors().and().csrf().disable();
  }
  

• 方案3：本地开发用React代理规避跨域
  仅本地调试使用，在React项目的package.json中添加配置"proxy": "http://localhost:8080"，之后fetch请求直接写相对路径fetch('/artist')，所有请求会被React本地服务代理到8080端口，不会触发跨域校验。

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