使用 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>
主題
儲存空間無伺服器前端網頁與行動裝置網路與內容交付
標籤
Amazon Simple Storage ServiceAmazon API Gateway
語言
English
michal
已提問 10 個月前檢視次數 784 次
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 個月前

您尚未登入。 登入 去張貼答案。

一個好的回答可以清楚地回答問題並提供建設性的意見回饋，同時有助於提問者的專業成長。

回答問題指南

相關內容