CODEWITHSUNDEEP
javascriptnode.jsreactjsserverproxy
Harrison Cramer
Harrison Cramer

Reputation: 4496

Why Won't React Proxy Requests

I have a node backend server running on port 3001, and a react server that I am trying to proxy to that port in order to fetch data.

Right now, I have included the "proxy" line in the package.json file in my client folder, to tell React to proxy the requests to the port 3001.

However, when I try to make a simple request to a "test" route on my server, the React code doesn't proxy the request. It sends me to localhost:3000/test rather than localhost:3001/test.

I am not sure why this is happening. Why is the React code not proxying my requests correctly?

Package.json (client)

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001"
}

Package.json (node)

{
  "name": "todo-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "mocha tests/*.test.js  --exit",
    "test-watch": "export NODE_ENV=test || \"SET NODE_ENV=test\" && nodemon --exec \"npm test\"",
    "dev-server": "node server.js",
    "client": "npm run start --prefix client",
    "dev": "concurrently \"npm run dev-server\" \"npm run client\""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.3",
    "concurrently": "^3.6.0",
    "express": "^4.16.3",
    "jsonwebtoken": "^8.2.2",
    "lodash": "^4.17.1i0",
    "mongodb": "^3.1.0-beta4",
    "mongoose": "^5.1.1",
    "nodemailer": "^4.6.4",
    "twitter-validate": "^1.0.8",
    "validator": "^10.3.0"
  },
  "devDependencies": {
    "expect": "^1.20.2",
    "mocha": "^5.1.1",
    "nodemon": "^1.17.4",
    "rewire": "^4.0.1",
    "supertest": "^3.1.0"
  }
}

Login route:

  login(e) {
    e.preventDefault();
    axios.get("/test")
    .then((res) => {
      console.log(res);
    })
    .catch((e) => {
      console.log(e);
    })
  }

And the actual index.js file...

import React from "react";
import ReactDOM from "react-dom";
import "./styles/styles.scss";
import axios from "axios";

  class Login extends React.Component {

  showRoute(e){
    e.preventDefault();
    axios.get("/test")
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  }

  render(){
    return (
      <div>
        <form onSubmit={this.login}>
          <legend>Login</legend>
          <label>Email:</label>
          <input type='text' name='email'/>
          <label>Password:</label>
          <input type='text' name='password'/>
          <button>Login</button>
        </form>
        <button onClick={this.showRoute}>Forgot Password?</button>
      </div>
    );
  }
}

ReactDOM.render(<Login />, document.getElementById("app"));

And the error message I am getting is: 

GET http://localhost:3000/test 404 (Not Found)

Upvotes: 3

Views: 2399

Answers (2)

Goran_Ilic_Ilke
Goran_Ilic_Ilke

Reputation: 848

Issue is in webpack config,set webpack.dev.js as bellow and restart dev server

module.exports = merge(common, { mode: 'development', devServer: { host: 'localhost', port: 3000, open: true, historyApiFallback: true, proxy: { '/api': { target: 'http://localhost:3001', secure: false } } }, devtool: 'inline-source-maps' });

This solution works if you using your own starter pack for React,in your case try to figure out where is webpack dev config file for your "create-react-app" and make changes as in code above.Should be on path "/node_modules/react-scripts/config".

Cheers!

Upvotes: 1

fenghengzhi
fenghengzhi

Reputation: 61

You misunderstand the proxy.
A proxy doesn't change the url you request, it just transmit the request from localhost:3000 to localhost:3001.
The problem that the program doesn't work as you expected may be caused by the wrong way config proxy. As the code you post, the proxy may be set in server.js.

Upvotes: 1

Related Questions