a resposta à solicitação de comprovação não passa na verificação de controle de acesso: nenhum cabeçalho 'Access-control-Allow-Origin' está presente no recurso solicitado

Question

Nossa equipe de desenvolvimento está tentando enviar os arquivos para S3 com .net e enfrentando

O bucket S3 é configurado com a política CORS da seguinte forma:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://localhost:3000</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Adicionando o código javascript

import React from 'react';
import S3FileUpload from 'react-s3';
 
//Optional Import
import ReactS3, { uploadFile } from 'react-s3';
 
const config = {
    bucketName: 'yellow-pages-bahrain',
   // dirName: 'SPA_Images/Suppliers', /* optional */
    region: 'me-south-1',
    accessKeyId: 'XXXXXXXXXXXXXXXXXX',
    secretAccessKey: 'XXXXXXXXXXXXXXXXXXXX',
}

function App() {

 const upload = (e) => { 
   
  //console.log(e.target.files);
 // S3FileUpload.uploadFile(e.target.files[0], config)
  //reactS3.uploadFile(e.target.files[0], config)
  ReactS3.uploadFile(e.target.files[0], config)
  .then ((data) => {
    console.log(data);
  })
  .catch((err) => {
    alert(err);
  } )

}

  return (
    <div>
      <header>
      <h1>Nks testupload</h1>
      <input 
      type="file"
      onChange={upload}
      />
      </header>
    </div>
  );
}

export default App;

Alguém poderia nos ajudar com isso. Incapaz de descobrir como lidar com isso que está nos incomodando há dias.

Answer 1

Seu código está funcionando perfeitamente bem para mim. Eu não obtive nenhum erro. certifique-se de que seu código esteja usando a mesma região do intervalo. Por favor, verifique os cors. O seguinte está funcionando bem para mim.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Observe que o uso de credenciais do aws diretamente no front-end html não é recomendado. se você gostaria de fazer o upload do frontend, você deve usar s3 presignedUrls.

Upload de objetos usando URLs predefinidos