ön kontrol isteğine verilen yanıt erişim kontrol kontrolünü geçmiyor: İstenen kaynakta 'Access-control-Allow-Origin' başlığı yok

Question

Geliştirme ekibimiz dosyaları .net ile S3'e yüklemeye çalışıyor ve

S3 paketi, aşağıdaki gibi CORS politikasıyla yapılandırılır:

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

JavaScript kodunu eklemek

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;

Biri bize bu konuda yardımcı olabilir mi? Günlerden beri bizi rahatsız eden bununla nasıl başa çıkacağımızı çözemedim.

Answer 1

Kodunuz benim için mükemmel çalışıyor. Herhangi bir hata almadım. kodunuzun paket ile aynı bölgeyi kullandığından emin olun. Lütfen korseleri iki kez kontrol edin. Aşağıdakiler benim için iyi çalışıyor.

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

Lütfen aws kimlik bilgilerinin doğrudan html ön ucunda kullanılmasının tavsiye edilmediğini unutmayın. Ön uçtan yüklemek isterseniz, s3 presignedUrls kullanmalısınız.

Önceden imzalanmış URL'leri kullanarak nesneleri yükleme