React+Express应用无法渲染AWS S3图片问题求助

技术栈 #

• React
• 集成AWS SDK的Express
• 部署在fly.io平台

问题现象 #

尝试渲染AWS S3中的图片时，控制台抛出以下错误：

Refused to load the image 'https://say-yes-events.s3.eu-north-1.amazonaws.com/event-images/0342Andrei_profile.jpg' because it violates the following Content Security Policy directive: "img-src 'self' data:".

已尝试的解决方法 #

1. 在/public目录的index.html中添加CSP meta标签：

<meta
  http-equiv="Content-Security-Policy"
  content="img-src 'self' data: https://say-yes-events.s3.eu-north-1.amazonaws.com/ 'unsafe-inline';"
/>

2. 为AWS S3桶配置CORS规则：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

3. 确认S3中对应图片内容已开启公网访问权限

内容的提问来源于stack exchange，提问作者dre_i_dashur