重定向后获取实际图片网址答案

【问题标题】：Get actual image url after redirect重定向后获取实际图片网址
【发布时间】：2017-10-13 03:12:15
【问题描述】：

Hi Unsplash 允许通过以下方式从他们的网站加载随机图像：

https://source.unsplash.com/random/2560x1440

如果我每次 url 生成随机静态图像时从浏览器访问 url 例如：

https://images.unsplash.com/photo-1488616268114-d949a6d72edf?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2560&h=1440&fit=crop&s=a7f66c8417bcf79d2503b84db64c7b1a

我想通过第一个 url 请求 jquery 或 js 中的图像，并获得第二个作为响应。这可能吗？

【问题讨论】：

我在使用 laravel 时遇到了类似的问题。请帮我。 stackoverflow.com/questions/59167996/…?

标签： javascript jquery ajax

【解决方案1】：

您可以使用 XMLHttpRequest 的 responseURL。

MDN Reference

this answer 是 jQuery 和原生 JS 中的示例。

【讨论】：

【解决方案2】：

您可以使用PerformanceObserver获取请求资源的name属性值

const key = "unsplash";

const url = `https://source.${key}.com/random/2560x1440`;

let bloburl = void 0;

let img = new Image;

const getResourceName = () => {

  let resource = "";

  const observer = new PerformanceObserver((list, obj) => {
    // alternatively iterate all entries, check `"name"`
    // property value for `key`, break loop if specific resource requested
    for (let entry of list.getEntries()) {
      let {name: res} = entry.toJSON();
      resource = res;
    }
  });

  observer.observe({
    entryTypes: ["resource"]
  });

  return fetch(url)
    .then(response => response.blob())
    .then(blob => {
      observer.disconnect();
      bloburl = URL.createObjectURL(blob);
      img.src = bloburl;
      document.body.appendChild(img);
      return resource
    })
    
}

getResourceName().then(res => console.log(res)).catch(err => console.log(err))

您也可以使用Response.url

const key = "unsplash";

const url = `https://source.${key}.com/random/2560x1440`;

let bloburl = void 0;

let img = new Image;

const getResourceName = fetch(url)
    .then(response => Promise.all([response.url, response.blob()]))
    .then(([resource, blob]) => {
      bloburl = URL.createObjectURL(blob);
      img.src = bloburl;
      document.body.appendChild(img);
      return resource
    });
    
getResourceName.then(res => console.log(res)).catch(err => console.log(err))

【讨论】：

【解决方案3】：

这很棘手，因为发生了几件事。

如果您使用 Chrome 或 Firefox，请打开开发者工具并查看网络选项卡，您会看到原始请求返回 HTTP 302 重定向到不同的 URL：

然后浏览器遵循指定的Location 标头，您将获得您所看到的页面。图片位于该页面上的 <img> 内。

因此，要获得最终图像，您需要：

对初始 URL 执行 ajax 请求
解析响应标头以获取新位置
向新位置发出 ajax 请求
解析新响应中的 HTML 以从 img 标记中获取实际图像 URL。

祝你好运！

【讨论】：

【解决方案4】：

fetch('https://source.unsplash.com/random').then(res=>{console.log(res)})

来自source 为我工作。

【讨论】：