在服务器端呈现的 React 项目中使用 Headers 时出现“ReferenceError: Headers is not defined”

Question

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

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

Answer 1

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

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

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

Answer 2

这对我有用

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

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

我无法new fetch.Headers()按照 @eaccmk 的建议拨打电话

Answer 3

TL;DR 简答，使用：

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

var myHeaders = new fetch.Headers();

更多细节： 这是我在跑步时遇到的错误npm test

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

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

Fetch API的Headers 接口允许你......所以我试过这个：

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