根据不同的环境设置自定义标头答案

【问题标题】：Set custom headers based on different envs根据不同的环境设置自定义标头
【发布时间】：2021-12-30 14:00:02
【问题描述】：

我想在我的应用程序中根据环境设置自定义标题“id”、“env”和“name”，它们对于不同的环境都有不同的值。我无法根据我的代码逻辑找出使其工作的最有效方法。

这是我定义环境的方式：

let host = "xxxxxxxx";

function getHost() {
  var env = getEnv();

  env = env ? env : process.env.REACT_APP_ENV;

  switch (env) {
    case "stage":
      host = 
       "xxxxxxxxxxxxxxxxxxx";
      break;
    case "prod":
      host = 
        "xxxxxxxxxxxxxxxxx";
      break;
    case "local":
      host = "xxxxxxxxxxxxxx";
      break;
    case "dev":
      default:
        host = "xxxxxxxxxxxxxxxxxxx";
      break;
  }
  return host;
}

export const HOST = getHost();

这几乎是我的应用程序中每个“标题”的设置方式，您可以看到到目前为止只有一些值：

export function fetchRefresh(token) {
  return (dispatch) => {
    return fetch(API_ROOT + "/xxxxxxx/xxx/xxxxxx", {
      method: "POST",
      headers: {
        authorization: `Bearer ${token}`,
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: token,
    })
    .then()
    // the rest
  }
}

我想过做这样的事情，并在我的代码中将 HEADERS 添加到 headers: {} 中，但它只会使我想要添加单个对象的 3 个自定义标题，它们都应该是单独的值而不是对象：

function getHeaders() {
  var env = getEnv();

  env = env ? env : process.env.REACT_APP_ENV;

  switch (env) {
    case "stage":
      return {
        "ID": "xxxxxxxxxxxxxx",
        "ENV": "xxxxxxxxxxxx",
        "NAME": "xxxxxxxx",
      }
    case "prod":
      return {
        "ID": "xxxxxxxxxxxxxx",
        "ENV": "xxxxxxxxxxxx",
        "NAME": "xxxxxxxx",
      }
    case "local":
      return {
        "ID": "xxxxxxxxxxxxxx",
        "ENV": "xxxxxxxxxxxx",
        "NAME": "xxxxxxxx",
      }
    case "dev":
      return {
        "ID": "xxxxxxxxxxxxxx",
        "ENV": "xxxxxxxxxxxx",
        "NAME": "xxxxxxxx",
      }
  }
}

export const HEADERS = getHeaders();

你能帮忙吗？谢谢

【问题讨论】：

你在使用 create react app 吗？
是的，我正在使用它。但是环境是在 getEnv() 中定义的

标签： javascript reactjs api custom-headers

【解决方案1】：

你的意思是检索环境变量吗？您可以通过使用非常常用的“dotenv”包来设置自己的。

https://www.npmjs.com/package/dotenv

您可以像这样在.env 文件中设置环境变量：

MY_SECRET="new-secret-string"
KEY=VALUE

哪些可以处理

// This will read variables from .env file
require('dotenv').config();

console.log(process.env.MY_SECRET)

【讨论】：

我认为这不一定是我的意思。我只想根据其环境将自定义变量放入请求标头中。有什么方法可以在不添加新依赖项的情况下做到这一点？谢谢

【解决方案2】：

您需要执行以下操作。一、安装https://www.npmjs.com/package/env-cmd

接下来，您可以根据您的环境指定要使用的.env。下面的代码允许您以声明方式而不是命令方式指定配置（这是您尝试做的）。即使您添加了更多的依赖项，您也会获得一种更有弹性的做事方式。现在，当你说 process.env.REACT_APP_ID process.env.REACT_APP_ENV process.env.REACT_APP_NAME 时，将根据 env 透明地获取正确的值。

"scripts": {
    "start": "env-cmd -f env_anotherenv.env react-scripts start",
    "start_vscode": "env-cmd -f env_vscode.env react-scripts start",
    "build_staging": "env-cmd -f env_staging.env react-scripts build --profile",
    "build_production": "env-cmd -f env_production.env react-scripts build --profile"
}

env_production.env 的示例将是

REACT_APP_ID = someid
REACT_APP_ENV = someenv
REACT_APP_NAME = somename

【讨论】：