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方法代码：

// index.jsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("content"));

这是请求/响应头：

Chrome | Firefox

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

Error

感谢您的帮助！：）

编辑：manifest.json：

/**
 * 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
        }
    )
};

}

Answer 1

我相信您需要在扩展程序的manifest.json中添加权限-请在问题中包含firefox Web扩展程序的manifest.json-或阅读此文档-您永远不需要在扩展程序– Jaromanda X

我找到了答案！我忘记将api域放到manifest.json的权限中！

我只需添加：

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

非常感谢！

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

1 个答案: