NextJS 和 fetch 拦截器随机工作答案

【问题标题】：NextJS and fetch interceptor working randomlyNextJS 和 fetch 拦截器随机工作
【发布时间】：2021-04-27 02:13:41
【问题描述】：

我正在尝试将我对 /v1/* 的所有请求修改为 https://api.treedis.com/v1/*。现在使用 fetch-intercept 和这段代码可以很好地工作：

fetchIntercept.register({
  request(url, _config) {
    const config = _config;
    const myHeaders = new Headers();

    if (!config.headers || !config.headers["Content-Type"]) {
      myHeaders.append("Accept", "application/json");
      myHeaders.append("Content-Type", "application/json");
    }

    let finalUrl = null;
    if (url.indexOf("http") === -1) {
      const domain = process.env.REACT_APP_DOMAIN || "http://localhost:5030";
      finalUrl = `${domain}/${url}`;
    } else {
      finalUrl = url;
    }
    config.headers = myHeaders;
    return [finalUrl, config];
  },
})

process.env.REACT_APP_DOMAIN 设置为 api.treedis.com。

此文件正在 _app.js 中导入

import App from "next/app";
import Head from "next/head";
import "../_helpers/auth-header";

class MyApp extends App {
  render = () => {
    const { Component, pageProps } = this.props;
    return (
      <>
        <Head />
        <Component {...pageProps} />
      </>
    );
  };
}

export default MyApp;

现在，当我转到 https://my.bc2e.com/tour/appartement-de-4-pieces-paris-5eme（我的 NextJS 应用程序）时，它会尝试转到 v1/public/getTour。在我的浏览器上它运行良好，但在我的客户端上它显示以下内容：

所以 fetch-intercept 对他不起作用。当他清理缓存时，它会起作用并且拦截器会启动，但在几次刷新后它就会停止工作。

所以它是相当随机的。有时拦截器会工作并添加process.env.REACT_APP_DOMAIN，有时则不会。我不知道为什么。

这里有什么想法吗？

此 NextJS 应用托管在 CloudFront 上，由 Lambda@Edge 执行路由。

【问题讨论】：

如何将环境变量注入 Next.js？
环境变量不是问题。我尝试将 api 字符串“api.treedis.com”硬编码到它，但它仍然不起作用。我在那里写了一个console.log，似乎在某些缓存刷新时没有调用拦截器。我怀疑这是 CloudFront/Lambda 的问题，但我不确定。

标签： reactjs next.js interceptor fetch-api

【解决方案1】：

为了解决这个问题，我用 axios 替换了 fetch。我知道这不是一个真正的解决方案，但它解决了这个问题。我不知道到底是什么原因造成的。

【讨论】：