React、Express集成Discord OAuth2时遭遇CORS问题求助

核心问题原因 #

你用AJAX（XMLHttpRequest）发起授权请求是错误的方式。Discord OAuth授权流程需要用户在浏览器中打开授权页面完成交互，而AJAX请求会被CORS策略拦截——因为Discord的授权页不会为你的localhost:3000设置Access-Control-Allow-Origin头，这是正常的安全机制。

正确的实现方式 #

• 直接跳转而非AJAX请求：让用户通过点击链接、或者前端代码直接跳转页面到你的后端接口x/api/auth/discord，后端重定向到Discord授权页后，用户完成授权会自动跳回你的回调地址，全程是浏览器的页面跳转，不会触发CORS检查。
  示例前端代码：

  // 点击按钮时触发跳转
  document.getElementById('discord-login-btn').addEventListener('click', () => {
    window.location.href = '/api/auth/discord'; // 替换为你的后端授权接口地址
  });
  

• 后端代理（非必要不推荐）：如果一定要保留AJAX调用的形式，需要在后端做代理：让后端请求Discord授权接口，将重定向地址返回给前端，前端拿到地址后再执行页面跳转。但这种方式属于多此一举，不符合OAuth流程的设计初衷。

额外注意事项 #

• 确保Discord开发者后台配置的redirect_uri和后端设置的完全一致，包括协议（http/https）、域名、路径。
• 本地开发时，禁止前端直接请求Discord的授权地址，必须通过后端中转规避跨域限制。

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