実際の画像のURLは、後にリダイレクト

Question

こんにちはUnsplashは経由して自分のウェブサイトからランダムに画像をロードすることができます取得

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 

jqueryまたはjsで最初のURLで画像をリクエストし、それに応答して2番目のURLを取得します。これは可能ですか？

Answer 1

XMLHttpRequestのresponseURLを使用できます。 jQueryとネイティブJSで例えば

MDN Reference

とthis answer。

Answer 2

あなたが要求されたリソースのnameプロパティ値を取得するためにPerformanceObserverを使用することができます

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))

Answer 3

これはいくつかのことが起こっているので、やっかいです。あなたは、元の要求がHTTP 302を返すことがわかります

あなたはクロムまたはFirefoxを使用している場合は、開発者向けツールを開き、ネットワーク]タブを見直すには、別のURLにリダイレクト：

をブラウザは、その後、次の指定されたLocationヘッダーとあなたが見るページを取得します。画像はそのページの<img>にあります。

1. が
2. は新しいにAJAXリクエストを実行し、新しい場所を取得するために、応答ヘッダを解析し、最初のURL
3. にAJAXリクエストを実行します。
   だから、最終的な画像を得るためにあなたがする必要があります場所
4. imgタグから実際の画像URLを取得するために新しい応答のHTMLを解析します。

幸運！