製作CORS請求的jsfiddle

Question

我試圖模擬的ping的jsfiddle即一個網站如果一個網站（比如www.google.com）可用，則顯示地位，「向上」，否則「向下」

AJAX將無法工作，因爲它將成爲CORS請求。 我試圖使用圖像源技巧，但它失敗（更新的代碼）。

的jsfiddle組圖像爲 「 https://fiddle.jshell.net/_display/www.google.com」，而不是 「www.google.com」 的源

JS Fiddle

var sites = { 
 
    google: { 
 
    url: "http://www.google.com", 
 
    id: "googleStatus" 
 
    }, 
 
    dummy: { 
 
    url: "http://www.dummysitealphabeta2.com", 
 
    id: "dummySiteStatus" 
 
    } 
 
} 
 

 
pingSite(sites.google); // Should update status to "Up" 
 
pingSite(sites.dummy); // Should update status to "Down" 
 

 
// ping site using image trick wiz. Add source of site to image 
 
// and add handler to image onload or onerror 
 
function pingSite(site) { 
 
    var image = new Image(); 
 
    image.src = site.url; 
 
    image.onload = function() { 
 
    console.log("loading loaded for " + site.url + "successfully"); 
 
    } 
 

 
    image.onerror = function() { 
 
    console.log("Image loading failed for " + site.url); 
 
    } 
 

 
} 
 

 
// Using AJAX - Won't work because of CORS 
 
function getStatus(site) { 
 
    $.ajax(site.url).done(function() { 
 
    // Http 200 OK 
 
    $(site.id).html("Up"); 
 
    }).fail(function() { 
 
    // HTTP 401, 
 
    $(site.id).html("Down"); 
 
    }); 
 
}

<table> 
 
    <tr> 
 
    <td>Google</td> 
 
    <td id="googleStatus"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Dummy Site</td> 
 
    <td id="dummySiteStatus"></td> 
 
    </tr> 
 
</table>

Answer 1

我試圖做到這一點使用圖像源技巧，但JSFiddle將圖像源設置爲「https://fiddle.jshell.net/_display/www.google.com」而不是「www.google.com」的

這是因爲www.google.com是相對 URL，它是本地的電流通路。

JS小提琴沒有任何設置。這是你的代碼。

如果你想訪問一個不同的主機名，那麼你需要是絕對URL（例如開始http://或https://）或方案相對URL（從//）。