reactjs '参考错误：在服务器端呈现的react项目中使用Headers时，没有定义Headers

xzv2uavs 于 2023-04-11 发布在 React

关注(0)|答案(5)|浏览(142)

我在React中设置了一个新的应用程序，我希望它是服务器端渲染的。不幸的是，我无法使用Headers，因为它一直抛出错误'ReferenceError：没有定义标题'。
我已经尝试通过添加来添加标题：

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

来源：https://stackoverflow.com/questions/57186018/referenceerror-headers-is-not-defined-when-using-headers-in-a-server-side-ren

5条答案

按热度按时间

vdzxcuhz1#

TL;DR简短回答，用途：

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/en-US/docs/Web/API/Headers
FetchAPI的Headers接口允许你....所以我试了一下：

旧：var myHeaders = new Headers(); * 至 *
新增：var myHeaders = new fetch.Headers();

赞(0）回复(0）举报 2023-04-11

bejyjqdl2#

不要在SSR中使用global，这取决于情况，它可能会导致一些讨厌的bug。例如，当你渲染一个用户时，另一个用户可以请求网站并更改全局变量，而第一个用户仍然有一些请求要做。
关于fetch -你可以像这样设置header：

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

赞(0）回复(0）举报 2023-04-11

yxyvkwin3#

这对我很有效

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

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

我无法按照@eaccmk的建议调用new fetch.Headers()

赞(0）回复(0）举报 2023-04-11

0ve6wy6x4#

1/install npm package：
npm install --保存node-fetch
2/然后导入：
import fetch，{ Headers } from“node-fetch”;
这对我很有效

赞(0）回复(0）举报 2023-04-11

wr98u20j5#

安装npm包。

npm install --save form-data

然后导入它。

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

赞(0）回复(0）举报 2023-04-11

我来回答

reactjs '参考错误：在服务器端呈现的react项目中使用Headers时，没有定义Headers

5条答案

相关问题

热门标签

最新问答