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

Posted

技术标签:

【中文标题】AWS - 对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头【英文标题】:AWS - Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource 【发布时间】:2017-11-11 07:29:32 【问题描述】:

我真的是 AWS 新手,所以请多多包涵 :(

我目前正在制作一个具有上传照片功能的网络应用程序。我想将这些照片保存在 S3 存储桶中,并将对它们的引用保存在我的数据库中。我目前正在关注本指南:http://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html

但是,我已经完成了指南中所述的所有操作(或者至少我希望如此),但是当我运行应用程序并运行 createAlbum() 方法时,我收到了错误:

XMLHttpRequest 无法加载 https://my-bucket-name.s3-us-west-2.amazonaws.com/myalbumname/。对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许访问 Origin 'http://localhost:3000'。

我确保 Bucket 权限中的所有用户都允许权限,我按照文档的指示更新了 CORS 配置,并更新了角色策略。

这是我的凭据代码:

var albumBucketName = '我的存储桶名称'; //显然不是真正的价值

var bucketRegion = 'us-west-2';

var IdentityPoolId = 'my-identity-pool-id'; //这里也是

AWS.config.update(

区域:bucketRegion,

凭证:新 AWS.CognitoIdentityCredentials(

IdentityPoolId:IdentityPoolId

)

);

var s3 = 新 AWS.S3( apiVersion: '2006-03-01', 参数:桶:albumBucketName );

我一直试图找到一个没有成功的解决方案。有谁知道我需要做什么来解决这个问题?任何帮助是极大的赞赏! 谢谢。

【问题讨论】:

不是以http://localhost:3000/ 测试您的网站,如果您以http://lvh.me:3000/ 测试您的网站,会发生什么不同吗? 这个问题你解决了吗?如果是,怎么做? 【参考方案1】:

S3 存储桶上的 CORS:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

AllowedOrigin 中的 * 可用于测试目的。

您的存储桶将需要临时凭证,您可以做的是:

 // Set the region where your identity pool exists 
    AWS.config.region = 'us-east-1';

    // Configure the credentials provider to use an identity pool for temp 
    credentials
    AWS.config.credentials = new AWS.CognitoIdentityCredentials(
    IdentityPoolId: 'IDENTITY_POOL_ID',
    );

    // Make the call to obtain credentials
    AWS.config.credentials.get(function()

    // Credentials will be available when this function is called.
    var accessKeyId = AWS.config.credentials.accessKeyId;
    var secretAccessKey = AWS.config.credentials.secretAccessKey;
    var sessionToken = AWS.config.credentials.sessionToken;

    var bucketName = 'bucket_name';

    var keyName = "key_name";

    var params = Bucket: bucketName, Key: keyName, Body: 'Hello World!';

    s3.putObject(params, function (err, data) 
    if (err)
    console.log(err)
    else
    console.log("Successfully uploaded data to " + bucketName + "/" + 
    keyName);
    );
    );

【讨论】:

以上是关于AWS - 对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头的主要内容,如果未能解决你的问题,请参考以下文章

对预检请求的响应未通过访问控制检查错误

对预检请求的响应未通过访问控制检查

对预检请求的响应未通过访问控制检查

对预检请求的响应未通过访问控制检查

CORS:对预检请求的响应未通过访问控制检查:预检请求不允许重定向

为啥 CORS 错误“对预检请求的响应未通过访问控制检查”?