Axios 自定义实例无法与下一个 JS 一起正常工作答案

【问题标题】：Axios custom instance not working properly with next JSAxios 自定义实例无法与下一个 JS 一起正常工作
【发布时间】：2020-11-09 18:55:44
【问题描述】：

所以首先我使用 baseurl 创建自定义 axios 实例并像这样导出它：

import axios from 'axios';

const instance = axios.create({
  baseURL: process.env.BACKEND_URL,
});

instance.defaults.headers.common['Authorization'] = 'AUTH TOKEN';
instance.defaults.headers.post['Content-Type'] = 'application/json';

export default instance;

导入此自定义 axios 实例时，问题出在我的传奇或任何一般组件中（仅限客户端）。我使用 next-redux-wrapper，当我为我的组件预取数据（使用 getStaticProps）时，一切正常，axios.defaults.baseURL 属性也正常。但是问题出在客户端，每当我在任何组件或 saga 中导入相同的 axios 实例但我从让我们说 componentDidMount 调用它时，相同的 axios.default.baseURL 是未定义的，所以如果我想发出 get 请求我必须输入完整的后端 + 查询 URL。问题可能是什么？示例：

export function* fetchTPsSaga() {
  try {
    console.log(axios.defaults.baseURL); 
    const url = `/training-programs`;
    const res = yield axios.get(url);
    const tPs = res.data.data;
    yield put(fetchTrainingProgramsSuccess(tPs));
  } catch (err) {
    yield put(fetchTrainingProgramsFail(err));
  }
}

// 第一次渲染（在服务器端）时，它是有效的 baseURL 属性，但是如果我从客户端（渲染组件时）调用相同的 saga，它是未定义的，所以我必须输入完整的网址

【问题讨论】：

标签： javascript reactjs axios next.js

【解决方案1】：

process.env 仅在服务器端工作。您可以使用publicRuntimeConfig 访问客户端和服务器端的环境变量。

next.config.js

module.exports = {
  publicRuntimeConfig: {
    // Will be available on both server and client
    backendUrl: process.env.BACKEND_URL,
  },
}

axios 实例文件

import axios from 'axios';
import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();

const instance = axios.create({
  baseURL: publicRuntimeConfig.backendUrl,
});

顺便说一句，如果您使用的是Next.js 9.4 及更高版本，Environment Variables 提供了另一种方式。

【讨论】：

或者您可以在 nextjs 给出的默认 .env.local 中的 env 变量之前使用 NEXT_PUBLIC_ 前缀。

【解决方案2】：

Loading Environment Variables Rules

为了向浏览器公开变量，您必须在变量前面加上前缀

NEXT_PUBLIC_

。例如： NEXT_PUBLIC_BACKEND_URL='http://localhost:3000'

然后你可以在 Axios 中访问这个 env 变量作为它的客户端渲染

import axios from 'axios';

const instance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
});

*注意：您必须使用 process.env.NEXT_PUBLIC_BACKEND_URL 而不是 process.env.BACKEND_URL

【讨论】：