在服务器端呈现的反应项目中使用标头时出现“ReferenceError：标头未定义”答案

【问题标题】：'ReferenceError: Headers is not defined' when using Headers in a server side rendered react project在服务器端呈现的反应项目中使用标头时出现“ReferenceError：标头未定义”
【发布时间】：2019-12-02 18:58:20
【问题描述】：

我正在 React 中设置一个新应用程序，我希望它在服务器端呈现。不幸的是，我无法使用Headers，因为它不断抛出错误“ReferenceError: Headers is not defined”。

我已经尝试通过添加来添加标题：

import fetch from 'node-fetch';

global.fetch = fetch
global.Headers = fetch.Headers;

这仍然会引发错误。

这是我当前如何实现标头的示例：

const defaultOptions = {
  method: METHOD,
  headers: new Headers({
    'Content-type': 'application/json',
    'X-Request-ID': new Date().getTime().toString(),
  }),
};

有人知道我缺少什么来构建和启动它吗？

【问题讨论】：

标签： reactjs fetch-api server-side-rendering

【解决方案1】：

不要在 SSR 中使用 global，视情况而定，它可能会导致一些讨厌的错误。例如，当您呈现一个用户时，另一个用户可以请求网站并更改全局变量，而第一个用户仍有一些请求要做。

关于 fetch - 您可以像这样设置标题：

   fetch('https://google.com', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
        }
     }
   );

【讨论】：

【解决方案2】：

TL;DR 简答，使用：

const fetch = require("node-fetch");

var myHeaders = new fetch.Headers();

更多详情： 这是我在运行npm test时遇到的错误@

var myHeaders = new Headers();
                ^
ReferenceError: Headers is not defined

我在official的第一行找到了答案标题上的 MDN 页面： https://developer.mozilla.org/en-US/docs/Web/API/Headers

Fetch 的 Headers 接口 API 允许您.... 所以我尝试了这个：

旧：var myHeaders = new Headers(); 到
新：var myHeaders = new fetch.Headers();

【讨论】：

【解决方案3】：

安装 npm 包。

npm install --save form-data

然后导入。

var FormData = require('form-data');

【讨论】：