对预检请求的响应未通过访问控制检查:否 '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 上传文件

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

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

从'react'导入React；从'react-s3'导入S3FileUpload；//可选导入从'react-s3'导入ReactS3，{uploadFile}；常量配置 = {bucketName: 'yellow-pages-bahrain',//dirName: 'SPA_Images/Suppliers',/* 可选 */地区:'me-south-1'，accessKeyId: 'XXXXXXXXXXXXXXXXXX',秘密访问密钥:'XXXXXXXXXXXXXXXXXXXX'，}功能应用(){const 上传 = (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 ((数据) => {控制台日志(数据)；}).catch((错误) => {警报(错误)；})}返回 (<div><标题><h1>Nks testupload</h1><输入类型=文件"onChange={上传}/></标题>

);}导出默认应用程序；

谁能帮我们解决这个问题.无法弄清楚如何处理这个困扰我们几天的问题.

解决方案

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

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

使用预签名 URL 上传对象

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

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>

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.

解决方案

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>

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.

Uploading objects using presigned URLs

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