reactjs.env 將 localhost:3000 添加到我的 axios 路徑

Question

我正在開發一個反應應用程序

我正在為 api 請求使用 axios

我在.env 中添加了我的基礎 url

當我提交表單並檢查網絡選項卡時

我看到了這個

http://localhost:3000/%22http://localhost:8000/api/%22;get-name

而不是這個

localhost:8000/api/get-name

.env

REACT_APP_DEV_BASE_URL = "http://localhost:8000/api/";

我的代碼

import React from "react"
import axios from "axios";
const Home = () => {

 const getName = () => {

 axios.get(`${process.env.REACT_APP_DEV_BASE_URL}get-name`, {"name": "John Stone"})
      .then((respons) => {})
      .catch((error) => {})
      .finally(() => {
        console.log("finished...");
      });
  }
  return (
     <div><button onClick={getName}>Get Name</button>
  )
}

export default Home

Answer 1

您需要非常小心地聲明您的環境變量。 不要在行尾使用分號或逗號。 此外，您不必用單引號或雙引號來包裹您的值（如果添加它會起作用，但這不是聲明.env變量的正確方法）。 因此，以這種方式更改您的.env文件：

REACT_APP_DEV_BASE_URL=http://localhost:8000/api/

最后重新啟動您的開發服務器。

有關更多信息， 請閱讀此文檔。

Answer 2

為了使用 .env 文件中的環境變量，您應該在項目的入口文件中添加以下代碼，通常是App.js ：

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:8000/api';