API Youtube，Firefox 上没有“Access-Control-Allow-Origin”答案

【问题标题】：API Youtube, no 'Access-Control-Allow-Origin' on FirefoxAPI Youtube，Firefox 上没有“Access-Control-Allow-Origin”
【发布时间】：2018-09-01 23:22:57
【问题描述】：

我正在开发一个可在 Chrome 和 Firefox 上使用的网络扩展程序。此扩展使用 fetch javascript 方法从 2 个 API、Youtube API 和 Twitch API 中提取数据。当我启动请求时，与 Firefox 相比，我在 Chrome 上看到了不同的响应标头。但是，这种差异，破坏了我在 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

}

【问题讨论】：

我相信您需要在您的扩展程序的 manifest.json 添加权限 - 请在问题中包含您的 firefox 网络扩展程序的 manifest.json - 或阅读此 documentation - 你扩展中永远不需要 CORS 标头

标签： javascript firefox google-chrome-extension http-headers youtube-api

【解决方案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"]

非常感谢！！

【讨论】：