reactjs .env add localhost:3000 to my axios path
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.