AWS Cognito Hosted UI - 重定向回本地主机后出现 CORS 错误

Question

我正在尝试使用 Cognito Hosted UI 实现一个非常简单的带有 authorization/authentication 流程的 React 应用程序。登录操作成功后，Hosted UI 重定向回 localhost:3000，并出现 CORS 错误。但是，尽管我找不到从 AWS Cognito 端启用 CORS 的任何地方。另外，我不确定这是否与 reactjs 有关。我是 React 的新手，也许我对 cognito 有误解。以下是我正在执行的步骤；

打开着陆页
单击“登录”将打开 Cognito 登录表单
输入凭据进行登录
重定向回 localhost:3000

这是App.js文件

import './App.css';
import React, {useEffect, useState} from 'react'
import Amplify, {Auth, Hub} from 'aws-amplify';
import { Navigate } from 'react-router-dom';

Amplify.configure({
    Auth: {

        // REQUIRED - Amazon Cognito Region
        region: 'us-east-1',

        // OPTIONAL - Amazon Cognito User Pool ID
        userPoolId: process.env.REACT_APP_USERPOOL_ID,

        // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
        userPoolWebClientId: process.env.REACT_APP_USERPOOL_WEB_CLIENT_ID,

        // OPTIONAL - Enforce user authentication prior to accessing AWS resources or not
        mandatorySignIn: false,

        // OPTIONAL - Manually set the authentication flow type. Default is 'USER_SRP_AUTH'
        authenticationFlowType: 'USER_PASSWORD_AUTH',

        // OPTIONAL - Hosted UI configuration
        oauth: {
            domain: 'https://***.auth.us-east-1.amazoncognito.com',
            redirectSignIn: 'http://localhost:3000',
            redirectSignOut: 'http://localhost:3000',
            responseType: 'code' // or 'token', note that REFRESH token will only be generated when the responseType is code
        }
    }
});

function App(props) {

  return (
    <div className="App">
      <h1>This is Landing page</h1>
      <a href="https://foobar.auth.us-east-1.amazoncognito.com/oauth2/authorize?client_id=3chm4jkbcn767oqu2m9icconcs&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000">Login</a>
    </div>
  );
}

export default App;

着陆页

托管 Cognito UI

这也是来自开发者控制台的错误。

对此有什么想法吗？谢谢！

Answer 1

问题的发生是因为我对 Amplify 的 oauth 部分进行了配置设置。我将域设置为 https://***.auth.us-east-1.amazoncognito.com，以便 Amplify 添加另一个 https 前缀。从域中删除 https 就成功了。我完全错过了这个。

这是 oauth 部分的正确设置

oauth: {
    domain: '***.auth.us-east-1.amazoncognito.com',
    redirectSignIn: 'http://localhost:3000',
    redirectSignOut: 'http://localhost:3000',
    responseType: 'code'
}

AWS Cognito Hosted UI - 重定向回本地主机后出现 CORS 错误

AWS Cognito Hosted UI - Getting CORS error after redirection back to localhost

reactjs

amazon-web-services

cors

amazon-cognito