Google Chrome擴展程序跨域XMLHttpRequest

我已經爲Google Chrome創建了一個簡單的擴展程序，但是我在訪問字典API時遇到了問題。該API運行在我的擴展運行所在的不同域上。我已閱讀有關此主題的所有StackOverflow線程，但無法解決此問題。Google Chrome擴展程序跨域XMLHttpRequest

我已將API的地址添加到權限。它沒有工作，所以我將其替換爲http://*/*進行測試。我有以下manifest.json：

{ 
"name": "web2memrise", 
"version": "0.3", 
"manifest_version": 2, 
"permissions": ["http://*/*"], 
"content_scripts": [{ 
    "matches": ["<all_urls>"], 
    "js": ["jquery.min.js", "contentscript.js"], 
    "css": ["style.css"] 
}], 
"web_accessible_resources": ["script.js", "jquery.min.js"] 
}

JavaScript函數中，我使API調用：

function translateCallback(json){ 
    var translations = ""; 
    for(var phrase of json){ 
     translations += ", "+phrase.text; 
    } 
    translations = translations.substring(2).replace(", ", "\t") 
    popupContent(translations) 
} 

function translate(l1, l2, phrase){; 
    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", "http://deu.hablaa.com/hs/translation/"+phrase+"/"+l1+"-"+l2+"/", true); 
    xhr.onreadystatechange = translateCallback 
    xhr.send(); 
}

但它給我下面的錯誤：

home:19 GET http://nxtck.com/as.php?zid=48360&clbk=nextperf net::ERR_BLOCKED_BY_CLIENTloadScript @ home:19window.onload @ home:37 
(index):1 XMLHttpRequest cannot load http://deu.hablaa.com/hs/translation/solution/fra-eng/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.lefigaro.fr' is therefore not allowed access. 
script.js:44 Uncaught TypeError: json[Symbol.iterator] is not a function

來源

2016-05-07 user2316602

哦，我」我從來沒有回答過一個問題，如果我的格式是殘暴的道歉。

首先，「xhr.onreadystatechange = translateCallback」是問題的根源，也許會導致錯誤的小雪球效應。所以我做了一個小小的改變來解決這個問題。我也改變了你的函數參數的順序，以匹配它們在url中使用的順序（使我更容易遵循）。

api文檔聲明一切都必須小寫，所以我將它添加到了translate（）函數中。還添加了responseType = json。任何格式不正確的參數都會導致404錯誤，從而導致「訪問控制 - 允許 - 來源」錯誤，因此需要注意。

這是我在我的background.js中運行的內容，也在內容腳本中工作。

function translateCallback(json) { 
    var translations = ""; 
    for (var phrase of json) { 
     translations += ", " + phrase.text; 
    } 
    translations = translations.substring(2).replace(", ", "\t"); 

    /* console for testing only */ 
    console.log(translations); 

    /* uncomment this, commented out for testing */ 
    //popupContent(translations); 
} 

function translate(phrase, l1, l2) { 
    var url = "http://deu.hablaa.com/hs/translation/" + phrase + "/" + l1 + "-" + l2 + "/"; 

    /* api requires lowercase */ 
    url = url.toLowerCase(); 

    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", url, true); 

    /* added json for responseType */ 
    xhr.responseType = 'json'; 

    /* onload function added */ 
    xhr.onload = function() { 
     if (xhr.status === 200) { 
      translateCallback(xhr.response); 
     } 
    }; 

    /* error function added */ 
    xhr.onerror = function() { 
     /* error */ 
    }; 

    /* this was causing problems and need to be removed */ 
    //xhr.onreadystatechange = translateCallback 

    xhr.send(); 
} 
translate('blume', 'deu', 'eng');

這一切都爲我工作，所以我希望它會爲你:)

來源

2016-05-07 16:20:18 Indy

Google Chrome擴展程序跨域XMLHttpRequest

回答

相關問題