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>
주제
스토리지서버리스프론트엔드 웹 및 모바일네트워킹 및 콘텐츠 전송
태그
아마존 심플 스토리지 서비스아마존 API 게이트웨이
언어
English
michal
질문됨 10달 전786회 조회
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
검토됨 한 달 전
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달 전

로그인하지 않았습니다. 로그인해야 답변을 게시할 수 있습니다.

좋은 답변은 질문에 명확하게 답하고 건설적인 피드백을 제공하며 질문자의 전문적인 성장을 장려합니다.

질문 답변하기에 대한 가이드라인

관련 콘텐츠