AWS S3 存储桶无法与 ngp-image-picker 一起使用答案

【问题标题】：AWS S3 bucket unable to work with ngp-image-pickerAWS S3 存储桶无法与 ngp-image-picker 一起使用
【发布时间】：2023-02-10 14:14:24
【问题描述】：

我将图像保存在我的 S3 存储桶中。我想用存储桶中的图像填充我的图像选择器组件，但出现以下错误：

图片位于 ... 来自原点“http://localhost:4200”已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我正在使用来自 npm 的 ngp-image-picker 包：https://www.npmjs.com/package/ngp-image-picker

选择器的代码：

<ngp-image-picker
($imageChanged)="onImageChanged($event, i)"
[_config]="config"
[_imageSrc]="picker.imageSource">
</ngp-image-picker>

注意：picker.imageSource 是 s3 图片 URL

我的 s3 存储桶设置：

政策：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::*******"
            },
            "Action": [
                "s3:ListBucket",
                "s3:Get*",
                "s3:Put*",
                "s3:*"
            ],
            "Resource": "arn:aws:s3:::******"
        },
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::****/*"
        }
    ]
}

科尔斯：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE",
            "HEAD",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]

访问控制列表：每个人都有公共访问权限。

注意事项：

当我在标签中使用 s3 图像 URL 时，它们会起作用
当我在图像选择器中使用在线图片的 URL 时_imageSrc然后就可以了

因此，我认为这是阻止选择器访问我的存储桶的 s3 设置，那么我将如何更改我的 s3 存储桶设置以允许选择器访问它？

【问题讨论】：

标签： image amazon-s3 cors imagepicker

【解决方案1】：

您遇到的错误消息是由于跨源资源共享 (CORS) 策略造成的。出现此问题是因为客户端（您在本地主机上运行的 Angular 应用程序）正在向其他域（您的 S3 存储桶）发出请求，而浏览器的安全策略不允许这样做。

您可以点击此链接了解更多详情： https://opsdevtech.blogspot.com/2023/02/s3-blocked-by-cors-policy.html

【讨论】：