Question

我正在尝试从我的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，但是它是被禁止的。为什么呢？

Answer 1

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

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

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

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

如何从Javascript获取AWS静态文件URL？

1 个答案: