如何解决对预检请求的响应未通过访问控制检查:所请求的资源中没有“ Access-control-Allow-Origin”标头
我们的开发团队正在尝试将文件上传到具有.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;
任何人都可以帮助我们。 无法弄清如何解决这一问题,这几天来就困扰了我们。
解决方法
您的代码对我来说工作正常。我没有任何错误。确保您的代码使用与存储桶相同的区域。请仔细检查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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。