การตอบสนองต่อคำขอ preflight ไม่ผ่านการตรวจสอบการควบคุมการเข้าถึง: ไม่มีส่วนหัว "Access-control-Allow-Origin" อยู่ในทรัพยากรที่ร้องขอ

Aug 17 2020

ทีมพัฒนาของเราพยายามอัปโหลดไฟล์ไปยัง S3 ด้วย. net และหันหน้าเข้าหา

ที่เก็บข้อมูล S3 ได้รับการกำหนดค่าด้วยนโยบาย CORS ดังนี้:

<?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
รหัสของคุณใช้งานได้ดีสำหรับฉัน ฉันไม่ได้รับข้อผิดพลาดใด ๆ ตรวจสอบให้แน่ใจว่ารหัสของคุณใช้ภูมิภาคเดียวกับที่เก็บข้อมูล โปรดตรวจสอบคอร์อีกครั้ง ต่อไปนี้ทำงานได้ดีสำหรับฉัน
<?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>

โปรดทราบว่าไม่แนะนำให้ใช้ข้อมูลประจำตัว aws โดยตรงในส่วนหน้า html หากคุณต้องการอัปโหลดจากส่วนหน้าคุณควรใช้ s3 presignedUrls

การอัปโหลดวัตถุโดยใช้ URL ที่กำหนดไว้ล่วงหน้า