Html 显示基于散列 url 的图像

Question

我只是想展示这张图片url，它位于instagram：

<img src="https://scontent-amt2-1.cdninstagram.com/v/t51.2885-19/s150x150/269430179_619307746060977_8863061929784384401_n.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com&_nc_cat=109&_nc_ohc=ZuthlbGc4tYAX9H5CH4&edm=AEF8tYYBAAAA&ccb=7-4&oh=00_AT9NSiEkpQ91iKHZ9L7udb9lJ3pNtC0CR0pBAqpwhkPTHg&oe=61CD0C19&_nc_sid=a9513d" alt="">

当我尝试使用浏览器显示此图像时，我没有任何问题，我可以，但是当我尝试使用带有IMG 标签的HTML 时，它无法显示，所有instagram 图像有hash 或基于hash，我们无法删除它们，

我该如何解决这个问题？

更新：

<ifModule mod_headers.c>
   Header set Access-Control-Allow-Origin: *
</ifModule>

Answer 1

正如@Tagi 评论的那样，Instagram 正在检查 HTTP Referer 请求标头并阻止来自第三方域的请求。这可以通过服务器端代理绕过。例如，可以将 Nginx 配置为通过以下方式代理图像：

server_name example.com;

location ~ ^/instagram-image(.*) {
  proxy_pass https://scontent-amt2-1.cdninstagram.com$1$query_string;
  add_header Access-Control-Allow-Origin *;  # allows fetch() to succeed
  expires 1y;
}

然后，对“example.com”Nginx 服务器的任何请求都将使用 URI 和查询字符串从 Instagram 的域加载图像：

https://example.com/instagram-image/v/t51.2885-19/s150x150/269430179_619307746060977_8863061929784384401_n.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com&_nc_cat=109&_nc_ohc=ZuthlbGc4tYAX9H5CH4&edm=AEF8tYYBAAAA&ccb=7-4&oh=00_AT9NSiEkpQ91iKHZ9L7udb9lJ3pNtC0CR0pBAqpwhkPTHg&oe=61CD0C19&_nc_sid=a9513d
  ⮑ << opens >> https://scontent-amt2-1.cdninstagram.com/v/t51.2885-19/s150x150/269430179_619307746060977_8863061929784384401_n.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com&_nc_cat=109&_nc_ohc=ZuthlbGc4tYAX9H5CH4&edm=AEF8tYYBAAAA&ccb=7-4&oh=00_AT9NSiEkpQ91iKHZ9L7udb9lJ3pNtC0CR0pBAqpwhkPTHg&oe=61CD0C19&_nc_sid=a9513d

<img src="https://example.com/..."> 标记仍然会失败，但您可以使用 fetch 请求使用 fetch() 动态显示图像：

showImage(
  document.querySelector('img'),
  'https://example.com/instagram-image/v/t51.2885-19/s150x150/269430179_619307746060977_8863061929784384401_n.jpg??_nc_ht=scontent-amt2-1.cdninstagram.com&_nc_cat=109&_nc_ohc=ZuthlbGc4tYAX9H5CH4&edm=AEF8tYYBAAAA&ccb=7-4&oh=00_AT9NSiEkpQ91iKHZ9L7udb9lJ3pNtC0CR0pBAqpwhkPTHg&oe=61CD0C19&_nc_sid=a9513d'
)

async function showImage(img, url) {
  const buffer = await (await fetch(url)).arrayBuffer()
  img.src = URL.createObjectURL(new Blob([buffer]))
}