如何解决 React 中 env 文件中的 API key 401 错误？

Question

我正在制作一个包含新闻的网站API。

如果 API 键放在组件中，它就可以工作。

但是，如果我从 .env 文件导入它，它不起作用，我收到 401 错误。

我重新检查了我的 API 密钥好几次。

我在我的项目中添加了 dotenv，我想我做了所有的事情，但我仍然遇到错误。

第 6 行：console.log() 运行良好。它显示了我的 API 密钥。

谢谢

[App.js]

import axios from "axios";
import React, { useState } from "react";
import dotenv from "dotenv";

dotenv.config();
console.log(process.env.REACT_APP_API_KEY);

function App() {
  const [data, setData] = useState(null);
  const onClick = async () => {
    try {
      const response = await axios
        .get(
          "https://newsapi.org/v2/top-headlines?country=kr&apiKey=process.env.REACT_APP_API_KEY"
        )
        .then((response) => {
          setData(response.data);
        });
    } catch (e) {
      console.log(e);
    }
  };
  return (
    <div>
      <div>
        <button onClick={onClick}>News</button>
      </div>
      {data && (
        <textarea
          rows={7}
          value={JSON.stringify(data, null, 2)}
          readOnly={true}
        />
      )}
    </div>
  );
}

export default App;

错误：

Answer 1

你应该像这样在 url 中使用字符串插值： 'https://newsapi.org/v2/top-headlines?country=kr&apiKey=${process.env.REACT_APP_API_KEY}'

如何解决 React 中 env 文件中的 API key 401 错误？

how to solve API key 401 error in env file in React?

api

environment-variables

reactjs