React本地对接AWS Cognito遭遇CORS错误求助

问题描述 #

我在搜索时见过类似问题，目前使用AWS示例代码在React中配置Cognito，已将回调/登出URI设置为AWS明确允许无需HTTPS的http://localhost:3000。我不在工作站，但确定尝试过去掉端口，却找不到问题所在——仅测试登录却出现CORS错误。我认为Cognito控制台中没有遗漏其他CORS设置，且Cognito内的托管UI链接可正常工作，仅代码调用时出错。我不想为了测试开发切换到生产环境，怀疑是否是浏览器问题，打算改用Amplify但当前问题十分怪异，恳请提供指导与支持！

相关代码 #

index.js

import { AuthProvider } from "react-oidc-context";

const cognitoAuthConfig = {
  authority: "https://cognito-idp.us-east-1.amazonaws.com/us-secretStuff(user pool)",
  client_id: "secretStuff client id",
  redirect_uri: "http://localhost:3000",
  response_type: "code",
  scope: "email openid phone",
};

const root = ReactDOM.createRoot(document.getElementById("root"));

// wrap the application with AuthProvider
root.render(
  <React.StrictMode>
    <AuthProvider {...cognitoAuthConfig}>
      <App />
    </AuthProvider>
  </React.StrictMode>
);

App.js

import { useAuth } from "react-oidc-context";

function App() {
  const auth = useAuth();

  const signOutRedirect = () => {
    const clientId = "secretStuff client ID";
    const logoutUri = "http://localhost:3000";
    const cognitoDomain = "https://us-east-secretStuff.auth.us-east-1.amazoncognito.com";
    window.location.href = `${cognitoDomain}/logout?client_id=${clientId}&logout_uri=${encodeURIComponent(logoutUri)}`;
  };

  if (auth.isLoading) {
    return <div>Loading...</div>;
  }

  if (auth.error) {
    return <div>Encountering error... {auth.error.message}</div>;
  }

  if (auth.isAuthenticated) {
    return (
      <div>
        <pre> Hello: {auth.user?.profile.email} </pre>
        <pre> ID Token: {auth.user?.id_token} </pre>
        <pre> Access Token: {auth.user?.access_token} </pre>
        <pre> Refresh Token: {auth.user?.refresh_token} </pre>

        <button onClick={() => auth.removeUser()}>Sign out</button>
      </div>
    );
  }

  return (
    <div>
      <button onClick={() => auth.signinRedirect()}>Sign in</button>
      <button onClick={() => signOutRedirect()}>Sign out</button>
    </div>
  );
}
  
export default App;

排查与解决建议 #

• 修正Authority配置：你的authority字段包含多余注释，正确格式应为https://cognito-idp.us-east-1.amazonaws.com/us-secretStuff（替换为真实用户池ID），Cognito的OIDC权威地址不允许额外字符。
• 核对应用客户端OAuth设置：
  • 确保勾选Authorization code grant流（与response_type: "code"对应）
  • 确认允许的OAuth范围包含email、openid、phone
  • 回调/登出URI必须精确匹配http://localhost:3000，不能有后缀斜杠或其他路径
• 适配react-oidc-context与Cognito端点：Cognito的OIDC端点和标准OIDC略有差异，需手动指定元数据：
  在cognitoAuthConfig中添加以下配置：

  metadata: {
    issuer: "https://cognito-idp.us-east-1.amazonaws.com/us-secretStuff",
    authorization_endpoint: "https://us-east-secretStuff.auth.us-east-1.amazoncognito.com/oauth2/authorize",
    token_endpoint: "https://us-east-secretStuff.auth.us-east-1.amazoncognito.com/oauth2/token",
    userinfo_endpoint: "https://us-east-secretStuff.auth.us-east-1.amazoncognito.com/oauth2/userInfo",
    end_session_endpoint: "https://us-east-secretStuff.auth.us-east-1.amazoncognito.com/logout"
  }
  

• 浏览器环境测试：用隐私模式打开页面重试，排除缓存或浏览器插件干扰；部分浏览器对localhost的CORS策略有特殊处理，也可尝试更换浏览器测试。
• 统一登出流程：避免混用auth.removeUser()和自定义登出链接，直接使用auth.signoutRedirect()方法，确保符合OIDC规范，减少异常。

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