प्रीफ़लाइट अनुरोध का जवाब एक्सेस कंट्रोल चेक पास नहीं करता है: अनुरोधित संसाधन में कोई 'एक्सेस-कंट्रोल-अनुमति-उत्पत्ति' हेडर मौजूद नहीं है

Aug 17 2020

हमारी विकास टीम .3 फाइलों को .net और फेसिंग के साथ S3 में अपलोड करने का प्रयास कर रही है

S3 बाल्टी को कोर पॉलिसी के साथ निम्नानुसार कॉन्फ़िगर किया गया है:

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

जावास्क्रिप्ट कोड जोड़ना

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;

क्या कोई हमारी मदद कर सकता है। यह पता लगाने में सक्षम नहीं है कि यह कैसे संभालना है जो हमें दिनों से खराब कर रहा है।

जवाब

1 ArunK Aug 18 2020 at 10:11
आपका कोड मेरे लिए बिल्कुल ठीक काम कर रहा है। मुझे कोई त्रुटि नहीं मिली। सुनिश्चित करें कि आपका कोड बाल्टी के समान क्षेत्र का उपयोग कर रहा है। कृपया cors को दोबारा जांचें। निम्नलिखित मेरे लिए ठीक काम कर रहा है।
<?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>

कृपया ध्यान दें कि html फ़्रंट पर सीधे aws क्रेडेंशियल्स का उपयोग करने की अनुशंसा नहीं की जाती है। यदि आप फ्रंटएंड से अपलोड करना चाहते हैं, तो आपको s3 presignUrls का उपयोग करना चाहिए।

निर्धारित URL का उपयोग करके ऑब्जेक्ट अपलोड करना