NextJS 和获取拦截器随机工作

Question

我正在尝试将我对 /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。在我的浏览器上它运行完美，但在我的客户端上它显示如下：

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

所以这很随机。有时拦截器会工作并添加 process.env.REACT_APP_DOMAIN，但有时不会。我不知道为什么。

有什么想法吗？

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

Answer 1

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

NextJS 和获取拦截器随机工作

NextJS and fetch interceptor working randomly

interceptor

reactjs

fetch-api

next.js