谷歌浏览器扩展跨域 XMLHttpRequest答案

【问题标题】：Google Chrome extension Cross Domain XMLHttpRequest谷歌浏览器扩展跨域 XMLHttpRequest
【发布时间】：2016-09-02 09:59:02
【问题描述】：

我为 Google Chrome 创建了一个简单的扩展程序，但在访问字典 API 时遇到了问题。 API 运行在与我的扩展程序运行的域不同的域上。我已阅读有关此主题的所有 StackOverflow 线程，但无法解决此问题。

我已将 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"]
}

我调用 API 的 Javascript 函数是：

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

【问题讨论】：

标签： javascript google-chrome google-chrome-extension xmlhttprequest cross-domain

【解决方案1】：

哦，我以前从未回答过任何问题，如果我的格式很糟糕，请道歉。

首先，“xhr.onreadystatechange = translateCallback”是问题的根源，可能会导致错误的小雪球效应。所以我做了一个小改动来解决这个问题。我还更改了函数参数的顺序以匹配它们在 url 中使用的顺序（让我更容易理解）。

api 文档声明所有内容都必须小写，因此我将其添加到您的 translate() 函数中。还添加了 responseType = json。任何格式错误的参数都会导致 404 错误，从而导致“Access-Control-Allow-Origin”错误，因此需要注意。

这是我在我的 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');

这一切都对我有用，所以我希望它对你有用:)

【讨论】：