la risposta alla richiesta di verifica preliminare non supera il controllo di controllo dell'accesso: nessuna intestazione "Access-control-Allow-Origin" è presente nella risorsa richiesta

Aug 17 2020

Il nostro team di sviluppo sta cercando di caricare i file in S3 con .net e affrontare

Il bucket S3 viene configurato con la policy CORS come segue:

<?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>

Aggiunta del codice 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;

Qualcuno potrebbe aiutarci a uscire da questo. Non sono in grado di capire come gestire questo che ci infastidisce da giorni.

Risposte

1 ArunK Aug 18 2020 at 10:11
Il tuo codice funziona perfettamente per me. Non ho ricevuto alcun errore. assicurati che il tuo codice utilizzi la stessa regione del bucket. Si prega di ricontrollare il cors. Quanto segue funziona bene per me.
<?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>

Tieni presente che non è consigliabile utilizzare le credenziali aws direttamente sul frontend html. se desideri caricare dal frontend, dovresti usare s3 presignedUrls.

Caricamento di oggetti utilizzando URL preimpostati