对预检请求的响应未通过访问控制检查:所请求的资源中不存在"Access-control-Allow-Origin"标头 [英] response to preflight request doesn't pass access control check: No 'Access-control-Allow-Origin' header is present in the requested resource

问题描述

我们的开发团队正在尝试将文件上传到具有.net的S3中并面对

Our development team is trying to upload the files into S3 with .net and facing

为S3存储桶配置了CORS策略，如下所示:

The S3 bucket is configured with the CORS policy as follows:

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

Adding the javascript code

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;

任何人都可以帮助我们. 无法弄清如何解决这个问题，这几天来就困扰着我们.

Could anyone help us out of this. Not able to figure out how to handle this which is bugging us from days.

推荐答案

您的代码对我来说工作正常.我没有得到任何错误.确保您的代码使用与存储桶相同的区域.请仔细检查cors.以下对我来说很好.

Your code is working perfectly fine for me. I did not get any errors. make sure your code is using the same region as the bucket. Please double check the cors. The following is working fine for 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>

请注意，不建议直接在html前端上使用aws凭证.如果您想从前端上传，则应使用s3 presignedUrls.

Please note that using aws credentials directly on the html frontend is not recommended. if you would like to upload from frontend, you should use s3 presignedUrls.

使用预签名URL上传对象

这篇关于对预检请求的响应未通过访问控制检查:所请求的资源中不存在"Access-control-Allow-Origin"标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！