在使用服务器端渲染的React项目中，当使用Headers时出现“ReferenceError：Headers未定义”。

Question

我正在使用React搭建一个新的应用程序，并希望它是服务器端渲染的。不幸的是，我无法使用Headers，因为它会抛出错误'ReferenceError: Headers is not defined'。

我已经尝试添加 Headers，方法如下：

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(),
  }),
};

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

- Chantal

Answer 1

简短回答：使用：

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

var myHeaders = new fetch.Headers();

---

更多细节： 这是我运行npm test时遇到的错误。

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

我在 MDN Headers 官方文档的第一行找到了答案： https://developer.mozilla.org/zh-CN/docs/Web/API/Headers

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

旧的 : var myHeaders = new Headers(); 变成
新的 : var myHeaders = new fetch.Headers();

- eaccmk

Answer 2

在SSR中不要使用全局变量，因为这可能会导致一些严重的错误。例如，当您正在渲染一个用户时，另一个用户可以请求网站并更改全局变量，而第一个用户仍然需要执行一些请求。

关于fetch - 您可以像这样设置头部：

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

- ewief

Answer 3

这对我起作用了

import fetch, {Headers} from 'node-fetch'

if (!globalThis.fetch) {
  globalThis.fetch = fetch
  globalThis.Headers = Headers
}

根据 @eaccmk 的建议，我无法调用 new fetch.Headers()

，因为出现了错误。

- Tim

Answer 4

1/安装npm包：

npm install --save node-fetch

2/然后导入它：

import fetch, { Headers } from "node-fetch";

这对我很有效。

- hakim Faouzi

Answer 5

安装npm包。

npm install --save form-data

然后导入它。

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

- Tulshi Das