Access-Control-Allow-Origin 不允许获取 -> Origin *答案

【问题标题】：Getting -> Origin * is not allowed by Access-Control-Allow-OriginAccess-Control-Allow-Origin 不允许获取 -> Origin *
【发布时间】：2012-04-16 11:59:21
【问题描述】：

我正在制作一个非常简单的 Chrome 扩展程序，它将 http 协议上的页面重定向到 https 协议（如果存在）。我正在调试，我发现了 facebook，它同时具有 http 和 https。

代码在这里：

function redirect() {    
    chrome.tabs.query({active: true}, function(tabArray) {  
        var currentURL = tabArray[0].url;               //http://facebook.com
        var httpsURL = generateSSL(currentURL);         //https://facebook.com
        if(httpsURL == currentURL){
            console.log(currentURL+" is already on HTTPS");
            chrome.browserAction.setIcon({path:"../images/padlock_green.png"});
        } else if(checkSSL(httpsURL)){                      
            chrome.tabs.update(tabArray[0].id, {url: httpsURL});
            chrome.browserAction.setIcon({path:"../images/padlock_green.png"});
            chrome.browserAction.setBadgeText({text:"SSL"});
            console.log("SSL found,"+currentURL+" redirected to"+httpsURL);
        } else {
            //donothing
            console.log(currentURL+" has no SSL");
            chrome.browserAction.setIcon({path:"../images/padlock_red.png"});
        }
    });
}

ajax 调用：

function checkSSL(url){
    $.support.ajax = true;
    $.ajax({
        url: url,
        type:'HEAD',
        error: function()
        {
            return false;
        },
        success: function()
        {
            return true;
        }
    });
}

问题是，我在控制台中收到以下错误消息：

XMLHttpRequest cannot load https://www.facebook.com/. Origin chrome-extension://pgidanbjmliilmmohlphbagcapafjjpg is not allowed by Access-Control-Allow-Origin.

我不知道可能是什么问题:(

【问题讨论】：

好像您的扩展程序正在发出 Ajax 请求...
sry，我忘记复制 ajax 调用，我更新了我的帖子：/
但是 Ajax 调用是问题所在......你不能这样做，这就是错误消息所说的。此外，您不能从 Ajax 回调中返回值，整个设置将无法正常工作。您必须找到其他方法来测试 HTTPS 版本是否可用。
我明白了，那么如何判断一个url是否存在，并返回结果呢？
我们也可以查看您的manifest.json 文件吗？

标签： jquery google-chrome-extension

【解决方案1】：

您的代码有几个小问题：

您的清单文件仅请求 http://*/* 的权限，不 https://*/*，因此您对 HTTPS 站点的请求失败。您需要获得 *://*/* 的权限，这样您就可以通过所有协议获取所有域上的所有页面，而不仅仅是通过 HTTP。
第二个问题是您希望您的 $.ajax 调用返回一个布尔值，但事实并非如此。 $.ajax 调用有两个回调，每个都返回一个布尔值，但checkSSL 在 Ajax 调用完成之前终止，这意味着 checkSSL 总是返回 undefined。

您想要做的是为checkSSL 提供一个回调函数作为参数：

function checkSSL(url, callback){
    $.ajax({
        url: url,
        type:'HEAD',
        error: function() { callback(false); },
        success: function() { callback(true); }
    });
}

然后，使用该回调运行调用checkSSL 之后的代码：

function redirect() {    
    chrome.tabs.query({active: true}, function(tabArray) {  
        var currentURL = tabArray[0].url;               //http://facebook.com
        var httpsURL = generateSSL(currentURL);         //https://facebook.com
        if(httpsURL == currentURL){
            console.log(currentURL+" is already on HTTPS");
            chrome.browserAction.setIcon({path:"../images/padlock_green.png"});
        } else {
            // call checkSSL and take action in an anonymous callback function!
            checkSSL(httpsURL, function(urlDoesExist) { 
                if(urlDoesExist) {                 
                    chrome.tabs.update(tabArray[0].id, {url: httpsURL});
                    chrome.browserAction.setIcon({path:"../images/padlock_green.png"});
                    chrome.browserAction.setBadgeText({text:"SSL"});
                    console.log("SSL found,"+currentURL+" redirected to"+httpsURL);
                } else {
                    //donothing
                    console.log(currentURL+" has no SSL");
                    chrome.browserAction.setIcon({path:"../images/padlock_red.png"});
                }
            });
        }
    });
}

请注意第一个else 下方代码的更改。在 Ajax 调用解决之前，我们无法决定要做什么，因此我们让 Ajax success 和 error 函数使用布尔参数触发回调。然后，该回调函数会根据布尔值采取行动。

【讨论】：

【解决方案2】：

如果您打包您的扩展程序，您可以进行跨域请求，但如果您将其创建为托管应用程序/扩展程序则不允许，请参阅：

Chrome extension Cross Domain Request

【讨论】：