phoenix-framework - Phoenix 似乎正在阻止动态添加到 DOM 的标签的图像缓存

Question

在此示例中，每次按下 Add 按钮时，都会向服务器发送一个请求，即使缓存控制标头已设置为防止这种情况发生。

缓存测试.html.eex：

<button onclick="add()">Add</button>
<div id="avatars"></div>

<script>
function add() {
    let i = document.createElement('img');
    i.src = 'http://localhost:4000/avatars/64e91e0a-5015-4ef6-bd0d-915a84f9f7bc/image.jpg';
    let d = document.getElementById('avatars');
    d.appendChild(i);
}
</script>

avatar_controller.ex

...
  def image(conn, %{"avatar_id" => id}) do
    a = Avatars.get_avatar(id)
    img = a.image_jpg
    conn
    |> Conn.put_resp_content_type("image/jpeg")
    |> Conn.put_resp_header("cache-control", "max-age=3600, public")
    |> Conn.send_resp(200, img)
  end
...

当我将 cachetest.html.eex 复制到 index.html 并直接在浏览器中打开它时，缓存工作正常，并且不会向服务器发出其他请求。

如何让缓存在 Phoenix 中工作？

标签： phoenix-framework

Answer 1

碰巧的是，浏览器开发工具中禁用了缓存。重新打开它可以解决问题。