I am working on a react app
I am using axios for api request
I added my base url in .env
when I submitted my form and I checked the network tab
I saw this
http://localhost:3000/%22http://localhost:8000/api/%22;get-name
instead of this
localhost:8000/api/get-name
.env
REACT_APP_DEV_BASE_URL = "http://localhost:8000/api/";
my code
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
You need to declare your environment variables very carefully. Don't use semicolon or comma at the end of the line. Also you don't have to put single or double quotes to wrap up your values(if you add it will work but this is not the right way of declaring your .env variables). So change your .env file in this way:
REACT_APP_DEV_BASE_URL=http://localhost:8000/api/
Finally restart your dev server.
For more information, read this docs out.
In order to make use of environment variables living in the .env file, you ought to add the following code to your project's entry file, it is often App.js:
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:8000/api';