Why Proxy Not Working When Used With Webpack

- 1 answer

I have a node.js Server listening on 3300. It is tested okay with postman. I have a react app created using create-react-app listening on 3000 and package.json having the statement "proxy":"http://localhost:3300". This is also tested okay.

I have another react app on the same machine, which is using webpack and listening on 8080. The package.json also has the same proxy statement "proxy":"http://localhost:3300" . In this case, when I am calling the api /api/users, my console log says

api-auth.js:5 POST http://localhost:8080/auth/signin/ 404 (Not Found)

if I directly call the api as fetch('http://localhost:3300/api/users')

it fails with CORS error.

just to be more clear, this failing react app is actually downloaded from in which I add a login form to test if it works.

Can you please help me resolve this issue?

As per my understanding just by adding the proxy line in the package.json does the trick but somehow it does not work when webpack is used.... is there something I should do in webpack as well?



Unless I'm mistaken, { proxy } from package.json is not read by webpack, webpack-dev-middleware or webpack-dev-server. It would explain the 404 response you are receiving.

You should try configuring { devServer.proxy }. If you would prefer, you can even import package.json to get the server URL.

Here's a simple example with with a web server proxying requests to an API server listening on localhost:3000.

Edit webpack-dev-server-proxy