API Youtube，Firefox上没有'Access-Control-Allow-Origin'

Question

我正在开发Chrome和Firefox上的网络扩展程序。此扩展使用fetch javascript方法从2个API，Youtube API和Twitch API中提取数据。当我启动请求时，我在Chrome上看到了与Firefox不同的响应标头。但是，这种差异，打破了我对Firefox的扩展。我需要在响应标题上使用“Access-Control-Allow-Origin”，我只在Chrome上而不是在Firefox上，我不明白为什么！

在documentation中，他们说他们需要在头部请求中使用“Origin”字段来在响应中提供“Access-Control-Allow-Origin”。我有正确的标题，但没有正确的答案。

这是我的fetch方法的代码：

/**
 * Obtientla promesse de donnée Youtube
 * 
 * @method _getYoutubeDatasPromise
 * @returns {Promise}
 * @private
 */
_getYoutubeDatasPromise() {

    const headers = new Headers();

    return fetch(
        `https://www.googleapis.com/youtube/v3/search?key=${YT_key}&channelId=${YT_UserId}&part=snippet,id&order=date&maxResults=2`,
        {
            method: 'GET',
            mode: 'cors',
            headers: headers
        }
    )
};

这是请求/响应标头：

Chrome | Firefox

这是Firefox上的控制台中的错误日志：

Error

谢谢你的帮助 ！ :)

编辑：manifest.json：

{
"name": "HuzLive",
"version": "0.1",
"description": "Soyez toujours au courant des lives & vidéos de votre streameur Dofus préféré",
"permissions": ["activeTab", "notifications", "storage"],
"background": {
    "page": "background.html"
},
"browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
        "16": "images/huz_logo16.png",
        "32": "images/huz_logo32.png",
        "48": "images/huz_logo48.png",
        "128": "images/huz_logo128.png"
    }
},
"icons": {
    "16": "images/huz_logo16.png",
    "32": "images/huz_logo32.png",
    "48": "images/huz_logo48.png",
    "128": "images/huz_logo128.png"
},
"applications": {
    "gecko": {
      "id": "{b8e90417-1550-474f-bd6e-de91b8382298}",
      "strict_min_version": "42.0"
    }
  },
"manifest_version": 2

}

Answer 1

我相信您需要在扩展的manifest.json中添加权限 - 请在问题中包含firefox Web扩展的manifest.json - 或者阅读本文档 - 您永远不需要在扩展中使用CORS头 - Jaromanda X

我找到了答案！我忘了把api域名放在我的manifest.json的许可中！

我只是添加：

"permissions": ["https://api.twitch.tv/*", "https://www.googleapis.com/*", "activeTab", "notifications", "storage"]

非常感谢 ！！