分类导航

程序问答发布时间：2022-06-01 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了仅当我尝试通过 mask-image: url() 加载图像时才会收到 CORS 错误，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决仅当我尝试通过 mask-image: url() 加载图像时才会收到 CORS 错误？

开发过程中遇到仅当我尝试通过 mask-image: url() 加载图像时才会收到 CORS 错误的问题如何解决？下面主要结合日常开发的经验，给出你关于仅当我尝试通过 mask-image: url() 加载图像时才会收到 CORS 错误的解决方法建议，希望对你解决仅当我尝试通过 mask-image: url() 加载图像时才会收到 CORS 错误有所启发或帮助；

我正在尝试从 S3 存储桶加载 PNG 图像并在 img src 中工作。但是当我尝试使用 @H_214_3@mask-image: url(...) 加载时，请求失败并出现 CORS 错误。

requests image

相同的图像在第二次请求时失败。我已经更改了 s3 上的 cors 配置，现在看起来像这样：

S3 Bucket Cors 配置：

[
    {
        "Allowedheaders": [
            "Authorization","Content-Type","Origin","X-requested-With","Access-Control-Allow-Origin","Content-*"
        ],"AllowedMethods": [
            "GET","POST"
        ],"AllowedOrigins": [
            "*"
        ],"Exposeheaders": [
            "x-amz-server-sIDe-encryption","x-amz-request-ID","x-amz-ID-2","Access-Control-Allow-Origin"
        ],"MaxAgeSeconds": 3000
    }
]

curl 响应已经包含 Access-Control-Allow-Origin: *

卷曲：

curl -i -H "Origin: @R_450_10107@://localhost:3000" @R_450_10107@s://xcover.s3.amazonaws.com/can/300/4-b1ab5561-1910-416d-9beb-45c37de5f8e6.png
@R_450_10107@/1.1 200 OK
x-amz-ID-2: CExXGX+169DpbY/uINukl5BNo0H2VQx8HU2kVEIIwrxH7zgRzegkndI/i4PY/kJZ31q7IzdulEs=
x-amz-request-ID: ECJ59K5Y94GZB1JQ
Date: Sun,14 Mar 2021 10:11:00 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST
Access-Control-Expose-headers: x-amz-server-sIDe-encryption,x-amz-request-ID,x-amz-ID-2,Access-Control-Allow-Origin
Access-Control-Max-Age: 3000
vary: Origin,Access-Control-request-headers,Access-Control-request-Method
Last-ModifIEd: Sun,14 Mar 2021 01:09:44 GMT
ETag: "f85d090b535e9795bb386acac3fc6f59"
Accept-Ranges: bytes
Content-Type: image/png
Content-Length: 11618
Server: AmazonS3