AWS API Gateway 连接到我的上传按钮时出现问题

Question

我试图使用 AWS 制作一个应用程序并对上传文件做出反应，直到我尝试单击上传按钮时才遇到任何问题，这给了我一个错误，告诉我 API 中的帖子有问题。

当我单击上传按钮时，它给了我这些错误：

net::ERR_FAILED 403 (Forbidden)

Access to XMLHttpRequest at 'https://6w6k152g.execute-api.us-east-1.amazonaws.com/dev1/test from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

There was an error uploading the file! Error: Network Error
    at createError (createError.js:16:1)
    at XMLHttpRequest.handleError (xhr.js:84:1)

这是导致问题的代码部分：

 axios.post("https://6w152g.execute-api.us-east-1.amazonaws.com/dev1/test", formData)
      .then(response => {
        console.log('File uploaded successfully:', response.data);
        this.setState({
          SelectedFile: null,
          fileUploadedSuccessfully: true,
          noFileSelectedWarning: false,
          errorMessage: ''
        });
      })
      .catch(error => {
        console.error('There was an error uploading the file!', error);
        this.setState({
          errorMessage: 'There was an error uploading the file.'
        });
      });
  };

我从头开始使用如何使用 React 和无服务器 API 在 AWS 上构建文件上传系统 | 重新制作 API Lambda、S3、API 网关 - YouTube。

Answer 1

您应该在 React API 中启用 CORS 并重试。此外，您可以在 Web 应用程序中添加代理，因为它在本地运行。 确保 API 是公开可用的。