why proxy not working when used with webpack

Question

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 http://mdbootstrap.com 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?

• Amir-Mousavi: I think the problem is with your fetch function in api-auth.js or anywhere else you have implemented it. can you send your fetch function too

Answer 1

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

• Avinash: sorry I tried all 3 options provided on the link. It still goes to 8080 instead of 3300.
• Filip Dupanović: @Avinash I added a simple example you can start from that should work. The API server uses the default port 3000 from micro.
• Avinash: hello, I am sorry but I tried several means and researched a lot.... actually it should work as-is but somehow, it is not working. I have not changed anything just copied the code and tried to make it work in webpack solution. The react documentation says that the accept header should not be text/html for it to work. I am using application/json but still not working. So I will keep the post up until I can else I will have to close the post. Sorry mate you tried your best to help.
• Filip Dupanović: @Avinash no worries! One last thing I could recommend is to maybe try to dig into the { devServer.proxy } configuration and try to create a proxy config that logs the incoming requests and responses. It should help you debug where the problem is... it's probably some small detail somewhere.
• Avinash: That's a brilliant idea. I was wondering how can I log the comms.

Answer 2

You don't need proxy for this, you can install npm package "cors". https://www.npmjs.com/package/cors And use it at you node.js server. Here is how i use it at my express.js server.

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());

• Avinash: as I explained above I have a server in node.js which already has CORS configured (as SERVER) and it works. The problem statement is the react app configured using webpack does not use my proxy settings in the react app (CLIENT).