对预检请求的响应未通过访问控制检查：请求的资源中不存在“Access-control-Allow-Origin”标头

Posted 2023-03-04

【中文标题】对预检请求的响应未通过访问控制检查：请求的资源中不存在“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

【发布时间】：2020-12-07 05:45:09

【问题描述】：

我们的开发团队正在尝试使用 .net 将文件上传到 S3 并面向

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>

添加 javascript 代码

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;

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

【问题讨论】：

你能发布你的 javascript 代码与 s3 对话吗？

@ArunK 我会尽快与我分享它。您是否觉得尝试上传文件的代码有问题？

您是否在 staackoverflow 中手动输入了此 CORS 配置。它的格式不正确。缺少 CORSRule 结束标记

没有。第一个<CORSRule> 没有结尾<\CORSRule> 。第二个< CORSRule > 很好。

@ArunK i 在将其复制到堆栈溢出时出现手动错误

【参考方案1】：

你的代码对我来说工作得很好。我没有收到任何错误。确保您的代码使用与存储桶相同的区域。请仔细检查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 presignedUrls。

Uploading objects using presigned URLs

【讨论】：

这太糟糕了，我有那个 CORS 设置并且还试图运行那里的脚本，但我收到了这个错误。是否还有其他原因导致此问题？

我们可以用我的桶测试它吗

您认为问题出在区域上，即“me-south-1”。你用的是同一个地区吗？

我在 ap-southeast-2 中测试过

不，对于不同的存储桶。创建了一个具有相同配置和不同区域的新存储桶，然后它就可以工作了