如何从 Javascript 获取 AWS 静态文件 url？答案

【问题标题】：How to get AWS static file urls from Javascript?如何从 Javascript 获取 AWS 静态文件 url？
【发布时间】：2020-07-18 00:38:59
【问题描述】：

我正在尝试从我的 AWS S3 存储桶中获取一些静态图像的 URL。我有几个 javascript 函数可以更改用户单击的图像（单击“赞”按钮会将其变为绿色）。我无法让这些图像正常工作。我得到的最远的是得到一个 403 错误（禁止），我不完全确定为什么。现在，我在 script 标签中定义了一些 url 变量，并在我的 JS 函数中调用它们。

定义变量：

<script>
  var is_bookmark_url = "{% static 'img/is-bookmark.svg' %}";
  var bookmark_url = "{% static 'img/bookmark.svg' %}";
  var like_button = "{% static 'img/like-button.svg' %}";
  var liked_button = "{% static 'img/like-button-liked.svg' %}";
</script>

在 JS 函数中调用变量：

function changeLike(id) {
    el = document.querySelector('#' + id)
    source = el.src
    if (source.substring(source.length - 26) == "/img/like-button-liked.svg" || 
        source.substring(33, 59) == "/img/like-button-liked.svg") {
        el.src = like_button_url;
    } else { 
        el.src = liked_button_url;
    }
}

（我知道我的功能与优雅相反，但我不确定如何从 url 中获取图像名称——但至少它可以工作。）

我遇到问题的地方是我遇到了错误

GET https://appname.s3.amazonaws.com/img/bookmark.svg?
AWSAccessKeyId=XXXXXXXXXXXX&amp;Signature=XXXXXXXXXXXXX%3D&amp;Expires=1586147111 
403 (Forbidden)

所以它肯定是在生成一个 url，但它是被禁止的。这是为什么呢？

【问题讨论】：

我认为您无权访问这些图像，您需要在 S3 中公开这些图像。

标签： javascript django amazon-web-services amazon-s3

【解决方案1】：

错误清楚地表明该应用无权访问S3 对象。

您需要公开S3 对象才能访问它。

要公开单个对象，请按以下步骤操作：

从 Amazon S3 控制台中，选择包含以下对象的存储桶你想更新。
导航到包含对象的文件夹。
通过选择对象名称上的链接打开对象。
选择“权限”选项卡。
在公共访问下，选择所有人。

【讨论】：