使用AWS re:Post即您表示您同意 AWS re:Post 使用条款
AWS re:Postre:Post

Put file API -> S3 / cors error

0

Hi, i want to upload file (pdf) form my site to S3 using API i have configured everything IAM role and policy

When i try to uplod file from POSTMAN - everything works fine, file was uploaded Enter image description here

but when i try do this from my index.html i get this error

Enter image description here

Can anyone tell me what im doing wrong ?

or any other method to do this ?

this is my html

<!DOCTYPE html>
<html>
<head>
  <title>Przesyłanie pliku</title>
</head>
<body>
  <input type="file" id="fileInput">
  <button onclick="uploadFile()">Wyślij plik</button>

  <script>
    function uploadFile() {
      var fileInput = document.getElementById('fileInput');
      var file = fileInput.files[0];
      var myHeaders = new Headers();
      myHeaders.append("Content-Type", "application/pdf");

      var requestOptions = {
      method: 'PUT',
      headers: myHeaders,
      body: file,
      redirect: 'follow'
      };

    fetch("https://v9j07k5dj0.execute-api.eu-central-1.amazonaws.com/dev/umarzamy-chf-upload/file.pdf", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));
    }
  </script>
</body>
</html>
主题
存储无服务器前端 Web 和移动网络和内容交付
标签
亚马逊简单存储服务 (S3)亚马逊 API 网关
语言
English
michal
已提问 10 个月前785 查看次数
4 回答
1

Yes i have enabled CORS in API settings.

and when i upload html as static site - erros is the same

michal
已回答 10 个月前
0
已接受的回答

Thanks for your replies. I tried different combinations but still the same error. I'm a beginner, so maybe in the future I will approach the topic again.

At the moment I found a solution to upload a file using presign url

https://aws.amazon.com/blogs/compute/uploading-to-amazon-s3-directly-from-a-web-or-mobile-application/

I made a few changes and now I can upload .pdf files with a predefined file name without any problems.

Thanks again for your commitment.

michal
已回答 10 个月前
profile picture
专家
Giovanni Lauria
已审核 1 个月前
0

You are probably using API Gateway, have you enabled CORS?
Without this setting, access from index.html would result in an error.
https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors-console.html

profile picture
专家
Riku_Kobayashi
已回答 10 个月前
profile picture
专家
Gary Mclean
已审核 10 个月前
0

There are few things here:

  1. The error indicates that the origin is null. This happens when you try to open a file locally in the browser, for example by double clicking it or loading it with file://. You'll need to load the file from a local web server in order to test the upload functionality, and allow localhost in the CORS settings in the API Gateway. There are many ways to run a local web server, and your IDE may also have this capability built-in. The mozilla developer's network has more information on this.

  2. If you have uploaded this page to a web server you should allow that domain in your CORS allow list.

  3. You need to use FormData() to upload your file, because the body should have the binary contents of the file. Note in your postman screenshot that binary is selected under Body. See this example that uses fetch to upload files.

profile pictureAWS
Burhan Khalid
已回答 10 个月前

您未登录。 登录 发布回答。

一个好的回答可以清楚地解答问题和提供建设性反馈，并能促进提问者的职业发展。

回答问题的准则

相关内容