SpringBoot+Vue集成AzureAD登录时的CORS跨域问题排查

核心问题原因 #

你遇到的CORS错误本质是前端用AJAX请求后端登录接口时，后端返回302跳转到Azure AD域名，但浏览器的跨域规则不允许AJAX请求跟随跨域跳转——Azure AD的域名不可能给你的前端域名添加Access-Control-Allow-Origin头，所以浏览器直接拦截了这个跳转行为。而直接访问后端登录端点是浏览器的顶级导航请求，不受CORS规则限制，因此流程正常。

具体解决方案 #

1. 调整前端登录触发逻辑 #

放弃用AJAX/fetch调用后端登录接口，改成直接让浏览器发起顶级导航或弹窗：

• 跳转方式：Vue登录按钮点击事件里写：

  window.location.href = 'http://localhost:8080/api/auth/login';
  

• 弹窗方式（推荐，保留前端页面状态）：

  window.open('http://localhost:8080/api/auth/login', '_blank', 'width=600,height=800');
  

这种方式属于浏览器原生的页面跳转/弹窗，不会触发CORS预检，能正常跳转到Microsoft登录页。

2. 后端配置登录成功后的重定向 #

Azure AD登录成功回调到后端后，后端生成自定义令牌，然后重定向回前端页面，把令牌传递过去：

• 示例后端处理逻辑（基于Spring Security OAuth2）：

  @GetMapping("/loginSuccess")
  public String loginSuccess(Authentication authentication) {
      // 从authentication中获取Azure AD返回的用户信息，校验用户合法性
      boolean isUserValid = checkUserValid(authentication.getName());
      if (!isUserValid) {
          return "redirect:http://localhost:3000/login?error=invalid_user";
      }
      // 生成自定义JWT令牌
      String jwtToken = generateCustomToken(authentication);
      // 重定向回前端，令牌通过URL参数传递（生产环境建议用HTTPS+HttpOnly Cookie）
      return "redirect:http://localhost:3000?token=" + jwtToken;
  }
  

• 同时在Azure Portal的AD应用配置里，确保redirect URI设置为后端的回调地址（比如http://localhost:8080/api/auth/login/oauth2/code/azure），并在Spring Security里配置登录成功后跳转到上述/loginSuccess接口。

3. 前端接收并存储令牌 #

前端页面加载时，读取URL参数里的令牌，存储到localStorage或sessionStorage，后续请求后端接口时在请求头里携带：

// 在前端首页的created钩子中处理
created() {
  const urlParams = new URLSearchParams(window.location.search);
  const token = urlParams.get('token');
  if (token) {
    localStorage.setItem('customToken', token);
    // 清除URL参数，避免重复读取
    window.history.replaceState({}, document.title, window.location.pathname);
  }
}

// 请求后端接口时携带令牌
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('customToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

额外注意事项 #

• 生产环境中，令牌通过URL参数传递存在安全风险，建议改用HttpOnly + Secure + SameSite=None的Cookie存储令牌，同时后端配置CORS允许携带Cookie（需要将setAllowedOrigins设置为具体的前端域名，不能用*，并开启configuration.setAllowCredentials(true)）。
• 确保Azure AD应用的API权限配置正确，已添加所需的email、profile等权限，并完成管理员同意（如果是租户级应用）。

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