React应用fetch调用Azure AD授权端点报CORS错误及安全获取授权码问题

报错核心原因 #

• 手动在fetch中设置Access-Control-Allow-Origin: *的操作完全无效：该字段是响应头，仅能由接收请求的服务端返回给浏览器，用于声明允许的跨域访问源，浏览器禁止前端自定义该请求头，且该操作本身就不符合CORS规则。
• Azure AD的/authorize端点设计上就不支持CORS跨域AJAX调用：该端点是OAuth2授权码流程的用户交互入口，要求浏览器发起顶层导航请求，而非同源策略下的fetch/XHR AJAX请求。直接粘贴URL到地址栏可正常运行，是因为顶层导航不受CORS规则限制；而fetch发起的请求受同源策略约束，Azure AD未返回对应CORS响应头，因此触发跨域拦截。

解决方案 #

• 禁止使用fetch调用/authorize端点，直接通过修改浏览器顶层导航跳转至授权URL：

  window.location.href = "https://login.microsoftonline.com/tenant_id/oauth2/v2.0/authorize?client_id=xxxxxxxxxxxxxxxxxxxxx&response_type=code&redirect_uri=http://localhost:3050&scope=user.Read.All&response_mode=query"
  

• 跳转至Azure AD完成用户登录、权限授权后，Azure AD会自动重定向回你配置的redirect_uri（即http://localhost:3050），此时可在前端路由中读取URL参数中的授权码即可。
• 不存在其他可行方案：Azure AD官方未开放/authorize端点的CORS支持，强行通过AJAX调用该端点不符合OAuth2授权流程规范，也无法绕过用户交互环节。

核心说明 #

不存在让Azure AD直接通过AJAX响应体返回授权码的实现方式：授权码的发放必须依赖用户的交互登录与授权确认，该环节无法通过纯API调用完成，只能通过浏览器重定向实现。但可通过调整response_mode参数，让授权码不再出现在URL查询参数中，提升安全性。

可选安全实现方案 #

方案1：使用form_post响应模式 #

• 配置方式：将授权URL中的response_mode=query修改为response_mode=form_post，Azure AD完成授权后，不会把授权码、state等参数拼接在redirect_uri的查询参数中，而是向你的redirect_uri发起POST表单请求，所有授权相关参数会被放在application/x-www-form-urlencoded格式的POST请求体中返回。
• 优势：授权码不会留存于浏览器历史记录、服务器访问日志中，避免被第三方工具窃取，安全性远高于query模式。
• 注意事项：纯前端React SPA默认无法处理针对页面路由的POST请求，需要搭配以下任一方式实现：
  • 在前端路由前增加轻量后端中转层，接收该POST请求后解析请求体中的授权码，再转发给前端应用；
  • 采用微软官方的MSAL.js库，该库内部封装了form_post模式的适配逻辑，可直接在SPA中处理表单提交的授权参数。

方案2：使用fragment响应模式 #

• 配置方式：将response_mode修改为fragment，授权参数会被放在URL的hash片段中，不会随请求发送到服务器，仅在前端可读取。
• 注意：参数仍会显示在浏览器地址栏中，安全性略低于form_post模式，但无需处理POST请求，适合纯前端SPA场景。

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