制作CORS请求的jsfiddle

-1

我试图模拟的ping的jsfiddle即一个网站如果一个网站（比如www.google.com）可用，则显示地位，“向上”，否则“向下”制作CORS请求的jsfiddle

AJAX将无法工作，因为它将成为CORS请求。我试图使用图像源技巧，但它失败（更新的代码）。

~~的jsfiddle组图像为 “ https://fiddle.jshell.net/_display/www.google.com”，而不是 “www.google.com” 的源~~

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>

来源

2017-04-04 Rohit

我试图做到这一点使用图像源技巧，但JSFiddle将图像源设置为“https://fiddle.jshell.net/_display/www.google.com”而不是“www.google.com”的

这是因为www.google.com是相对 URL，它是本地的电流通路。

JS小提琴没有任何设置。这是你的代码。

如果你想访问一个不同的主机名，那么你需要是绝对URL（例如开始http://或https://）或方案相对URL（从//）。

来源

2017-04-04 15:14:23 Quentin

制作CORS请求的jsfiddle

回答

相关问题