javascript - 当我从 .env 获取 API_URL 作为环境变量时，出现错误。我安装了 dotenv

Question

.env

REACT_APP_MAPBOX_ACCESS_TOKEN=mytoken
API_URL=http://localhost:1377

.js

// const API_URL = "http://localhost:1337";

export async function listLogEntries() {
  const response = await fetch(`${process.env.API_URL}/api/routes`);
  return response.json();
}

export async function createLogEntry(entry) {
  const response = await fetch(`${process.env.API_URL}/api/routes`, {
    method: "POST",
    headers: {
      "content-type": "application/json",
    },
    body: JSON.stringify(entry),
  });
  return response.json();
}

当我从 .env 文件中获取 API_URL 时，出现错误：Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

但是如果我立即从 .js 文件中使用 API_URL

const API_URL = "http://localhost:1337";
export async function listLogEntries() {
  const response = await fetch(`${API_URL}/api/routes`);
  return response.json();
}

export async function createLogEntry(entry) {
  const response = await fetch(`${API_URL}/api/routes`, {
    method: "POST",
    headers: {
      "content-type": "application/json",
    },
    body: JSON.stringify(entry),
  });
  return response.json();
}

我没有收到该错误，并且我的应用程序也可以正常工作

标签： javascriptnode.jsjson

Answer 1

您可能没有正确实现 dotenv。我以这种方式实现它：在我的节点项目的 server.js 文件中使用 env 文件的路径进行最顶层的导入。在下面检查：-

require('dotenv').config({path: './.env'});

env 文件看起来像：-

而且我能够在项目中正确使用 .env 文件。

你可以在这里查看完整的博客。

我使用的 env 模块是这个。