i tried to setup my proxy to make react with node it tried to use proxy in package.json in the client but it keep giving me error when i try to use get method so i search for another solution and i found this one using this npm module (http-proxy-middleware) and i run npm cache clean --force command to clear all caches so anyone can tell me what is the error on this or if there is any other method i can try to make my app work fine

this is my server.js file

const express = require('express');
const connectDB = require('./config/db');
const app = express();

//connect database
connectDB();

// Init Middelware
app.use(express.json({ extended: false }));

const port = process.env.PORT || 6000;

app.get('/', (req, res) => {
  res.send('api running');
});

// Define route
app.use('/api/users', require('./router/api/user'));

app.use('/api/posts', require('./router/api/post'));

app.use('/api/profile', require('./router/api/profile'));

app.use('/api/auth', require('./router/api/auth'));

app.listen(port, () => {
  console.log(`server started in port ${port}`);
});

and this is my setupProxy.js file

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    proxy({
      target: 'http://localhost:6000',
      changeOrigin: true
    })
  );
};

but it gave me another problem

[1] proxy is not a function
[1] npm ERR! code ELIFECYCLE
[1] npm ERR! errno 1
[1] npm ERR! [email protected] start: `react-scripts start`
[1] npm ERR! Exit status 1
[1] npm ERR!
[1] npm ERR! Failed at the [email protected] start script.
[1] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[1]
[1] npm ERR! A complete log of this run can be found in:
[1] npm ERR!     C:\Users\hp\AppData\Roaming\npm-cache\_logs\2020-03-19T10_53_44_499Z-debug.log
[1] npm ERR! code ELIFECYCLE
[1] npm ERR! errno 1
[1] npm ERR! [email protected] client: `npm start --prefix social-app`
[1] npm ERR! Exit status 1
[1] npm ERR!
[1] npm ERR! Failed at the [email protected] client script.
[1] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[1]
[1] npm ERR! A complete log of this run can be found in:
[1] npm ERR!     C:\Users\hp\AppData\Roaming\npm-cache\_logs\2020-03-19T10_53_44_587Z-debug.log
[1] npm run client exited with code 1

i tried to setup my proxy to make react with node it tried to use proxy in package.json in the client but it keep giving me error when i try to use get method so i search for another solution and i found this one using this npm module (http-proxy-middleware) and i run npm cache clean --force command to clear all caches so anyone can tell me what is the error on this or if there is any other method i can try to make my app work fine

this is my server.js file

const express = require('express');
const connectDB = require('./config/db');
const app = express();

//connect database
connectDB();

// Init Middelware
app.use(express.json({ extended: false }));

const port = process.env.PORT || 6000;

app.get('/', (req, res) => {
  res.send('api running');
});

// Define route
app.use('/api/users', require('./router/api/user'));

app.use('/api/posts', require('./router/api/post'));

app.use('/api/profile', require('./router/api/profile'));

app.use('/api/auth', require('./router/api/auth'));

app.listen(port, () => {
  console.log(`server started in port ${port}`);
});

and this is my setupProxy.js file

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    proxy({
      target: 'http://localhost:6000',
      changeOrigin: true
    })
  );
};

but it gave me another problem

[1] proxy is not a function
[1] npm ERR! code ELIFECYCLE
[1] npm ERR! errno 1
[1] npm ERR! [email protected] start: `react-scripts start`
[1] npm ERR! Exit status 1
[1] npm ERR!
[1] npm ERR! Failed at the [email protected] start script.
[1] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[1]
[1] npm ERR! A complete log of this run can be found in:
[1] npm ERR!     C:\Users\hp\AppData\Roaming\npm-cache\_logs\2020-03-19T10_53_44_499Z-debug.log
[1] npm ERR! code ELIFECYCLE
[1] npm ERR! errno 1
[1] npm ERR! [email protected] client: `npm start --prefix social-app`
[1] npm ERR! Exit status 1
[1] npm ERR!
[1] npm ERR! Failed at the [email protected] client script.
[1] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[1]
[1] npm ERR! A complete log of this run can be found in:
[1] npm ERR!     C:\Users\hp\AppData\Roaming\npm-cache\_logs\2020-03-19T10_53_44_587Z-debug.log
[1] npm run client exited with code 1

• javascript
• node.js
• reactjs
• proxy
• http-proxy-middleware

1 Answer 1

With new version of http-proxy-middleware you'll need to use createProxyMiddleware

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
       target: 'http://localhost:6000',
       changeOrigin: true
    })
  );
};