la réponse à la demande de contrôle en amont ne passe pas le contrôle d'accès: aucun en-tête «Access-control-Allow-Origin» n'est présent dans la ressource demandée
Notre équipe de développement essaie de télécharger les fichiers dans S3 avec .net et face
Le compartiment S3 est configuré avec la stratégie CORS comme suit:
<?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>
Ajout du code 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;
Quelqu'un pourrait-il nous aider. Incapable de comprendre comment gérer cela, ce qui nous dérange depuis des jours.
Réponses
1 ArunK
Votre code fonctionne parfaitement pour moi. Je n'ai reçu aucune erreur. assurez-vous que votre code utilise la même région que le bucket. Veuillez vérifier les cors. Ce qui suit fonctionne très bien pour moi.
<?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>
Veuillez noter que l'utilisation des informations d'identification aws directement sur le frontend html n'est pas recommandée. si vous souhaitez télécharger depuis le frontend, vous devez utiliser s3 presignedUrls.
Téléchargement d'objets à l'aide d'URL prédéfinies