create-react-app doesn't work with proxy

Question

I use create-react-app to bootstrap my react app, I did this in my package.json

"proxy":"http://localhost:3001" because my api server is running on 3001, but I fire request using axios, it still point to port 3000, any clue what is missing? restarted my app several times it still the same.

Answer 1

In your package.json add:

"proxy": "http://localhost:3001",

Please restart both your server ( backend app ) and front-end ( Create React App )

Make sure that your post request with axios it's like below:

axios.post("/auth/register", userData)
     .then(res => console.log(res.data));

This example above it's from my environment and works as well. Notice that proxy works only for development mode

Ensure your code that has the right slash in url in proxy and in axios post both

Answer 2

Try to remove absolute path for request, and use relative path instead.

Example

axios.post("/api/auth/register", userData)
 .then(res => console.log(res.data));

Note: Do not use http://localhost:3000/api/auth/register as the request URI, it (React server) will automatically proxying the request, and the API request will serve from 3001 port.

Answer 3

I had this problem and I did everything "correct". For me GET requests were going to my proxy but not POST! I got Request Aborted error.

Discovered solution by accident that my data : { key: value} needed to be properly quoted as data : { "key": value }.