使用 AWS Cognito 对用户进行身份验证时出现网络错误答案

【问题标题】：Network error when authenticating user with AWS Cognito使用 AWS Cognito 对用户进行身份验证时出现网络错误
【发布时间】：2018-12-09 11:18:30
【问题描述】：

我正在尝试将 Cognito 身份验证合并到我的基于 React 的项目中。我的代码基于 NPM 页面中给出的示例。这就是它的样子：

var authenticationData = {
    Username : 'username',
    Password : 'password',
};

var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);

var poolData = {
    UserPoolId : '...', // Your user pool id here
    ClientId : '...' // Your client id here
};

var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

var userData = {
    Username : 'username',
    Pool : userPool
};

var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
    onSuccess: function (result) {
               console.log('Successfully logged!');
            }
        });
    },

    onFailure: function(err) {
        console.log(JSON.stringify(err));
    },

});

我创建了一个用户池并添加了一个应用程序客户端。我还为应用程序客户端启用了身份提供程序。但是，我的代码无法通过错误 {"code":"NetworkError","name":"Error","message":"Network error"} 进行身份验证。由于我的项目仍然托管在本地主机上，因此我已经为 Firefox 安装了 CORS 插件，但这并不能解决问题。我无法从这个错误消息中理解。我已经仔细检查了 Cognito 区域、池 ID 和客户端 ID。它们都设置为正确的值。有没有人熟悉这个错误并知道可能是什么原因造成的？

【问题讨论】：

这方面有什么进展吗？对于使用 javascript 的注册方法，我遇到了同样的错误。
@KMC 你找到解决办法了吗？
@Balaji 我做到了，但我不记得究竟是如何解决它的，因为它已经有一段时间了。我会看看然后回复你
谢谢..我很期待。
@KMC 嗨，这有什么更新吗？

标签： reactjs aws-sdk amazon-cognito aws-cognito

【解决方案1】：

有点晚了，但我今天遇到了完全相同的错误，我花了一段时间才弄明白。当提交后发生自动刷新时会发生这种情况。这可以防止对 AWS Cognito 的 API 调用完成而导致网络错误。

在启动认知功能之前，将event.preventDefault(); 添加到您的代码中。

例如，我在 addEventListener 中执行此操作：

document.querySelector("#authCognito").addEventListener("click", function(){
    var username = document.getElementById("userInput").value;
    var password = document.getElementById("passInput").value;
    var authenticationData = {
        Username: username,
        Password: password,
    };
    event.preventDefault();  
    cognitoAuthenticate(authenticationData);
});

【讨论】：

【解决方案2】：

我遇到了同样的问题，下面是 Vue 中的修复方法

<template>
  <button v-on:click="login($event)" class="btn btn-default btn-large">login</button>
</template>

<script>
  methods: {
    login (event) {
      if (event) {
        event.preventDefault()
      }

【讨论】：