使用AWS Cognito托管UI通过Google登录（授权码流程）时遭遇CORS错误的原因排查

我来帮你拆解下这个CORS错误的核心原因，以及对应的修复方案：

1. 请求方式与参数传递完全不符合OAuth2规范 #

你现在犯了一个关键错误：把POST请求所需的所有参数都拼在了URL里，而且对Content-Type的处理完全不对。OAuth2的/oauth2/token端点要求参数放在POST请求体中，而非URL查询参数；同时Content-Type是请求头的字段，不能直接拼到URL里。

这种错误的请求格式会导致Cognito服务器无法正确解析你的请求，自然也就不会返回符合要求的CORS响应头，直接触发浏览器的CORS拦截。

2. 错误地在请求头中添加Access-Control-Allow-Origin #

Access-Control-Allow-Origin是服务器返回给浏览器的响应头，用来声明允许哪些域名访问资源。你在前端请求的headers里添加这个字段完全无效，反而会让浏览器的预检查（OPTIONS请求）判定这是非法请求，进一步加剧CORS错误。

3. Cognito应用客户端配置可能存在疏漏 #

即使修复了代码，你还需要确认Cognito的配置是否正确：

• 检查应用客户端的**"App client settings"**，确保你填写的redirect_uri和前端代码中传递的完全一致（包括协议、域名、端口，比如http://localhost:3000/home）
• 确认Cognito用户池的**"Domain name"**配置中，已经将你的前端域名（比如http://localhost:3000）加入了允许的CORS源列表

修复后的代码示例 #

const rootUrl = `https://<our_apps_domain>.auth.us-east-1.amazoncognito.com/oauth2/token`;
const formData = new URLSearchParams();

formData.append('grant_type', 'authorization_code');
formData.append('client_id', process.env.GOOGLE_APP_CLIENT_ID);
formData.append('code', code);
formData.append('redirect_uri', `${process.env.FRONTEND_URL}/home`);

fetch(rootUrl, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: formData
})
.then(res => {
  if (!res.ok) {
    return res.json().then(err => Promise.reject(err));
  }
  return res.json();
})
.catch(err => console.error('Token请求失败:', err));

额外提醒 #

如果你的Google应用客户端设置了Client Secret，还需要在请求头中添加Authorization字段：值为Basic 加上client_id:client_secret的Base64编码字符串。

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