× React - fetch('/') won't hit index route in Express.router

Question

I've worked a bit with Express but am new-ish to React. I have React already hooked up to an Express server that works but having a problem getting fetch('/') in my main React App component to hit the index route in my Express app. For example I have these route in Express:

app.use('/', routes);
app.use('/users', users);

Both routes are identical in Express. They make a simple call to MongoDB and the response is res.json(data). Also when I test these routes pure on the Express port they both work fine.

Below is my React component. The problem is when I try to use fetch('/') to hit the corresponding app.use('/', routes); in Express it doesn't work. If I change it to fetch('/users') it works.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  state = {users: []}

  componentDidMount() {
    fetch('/') // this route doesn't work with Express!
      .then(res => res.json())
      .then(users => this.setState({ users }));
  }

  render() {
    return (
      <div className="App">
        <h1>Users</h1>
        {this.state.users.map(user =>
          <div key={user.id}>{user.username}</div>
        )}
      </div>
    );
  }
}

export default App;

Of course I could change the index route name to ('/index') or something but I'd like to keep it as ('/') route in the Express app if at all possible.

If anyone can point out what I am doing wrong or things I can try I'd be grateful. Thanks in advance!

What I don't understand is, how is your front-end App served? Isn't there a conflict between the App (which I assume resides at the root) and the root location of the data you're trying to fetch? Is fetching `"/"` even possible? — Thomas Hennes, Oct 21 '17 at 20:05
The React app lives in a folder called `client` in the root of my Express app. I am using `"proxy": "http://localhost:3001"`(which is the port my Express app is hosted on) in my React app's package.json. I then run the React app on `http://localhost:3000` and start-up Express and everything works fine as long as I don't use I `fetch('/')`. So maybe you've hit something ...maybe there is a conflict between the root of React and the Express route I am trying to call in the fetch?? — mikeym, Oct 21 '17 at 20:18
Try removing that proxy config, and instead do a `fetch("http://localhost:3001/")`, see if it works then. And yes, there is definitely a conflict, imo. — Thomas Hennes, Oct 21 '17 at 20:23
see also https://stackoverflow.com/questions/44365577/proxy-in-package-json-not-affecting-fetch-request — Thomas Hennes, Oct 21 '17 at 20:30

score 4 · Accepted Answer · answered Oct 21 '17 at 21:01

With your front-end app being served from http://localhost:3000 and your back-end data api served from http://localhost:3001, doing a fetch('/') will request data at http://localhost:3000.

Having the 'proxy' param set in your front-end package.json will NOT change that. This param is used, for instance, for node apps running outgoing requests, not for a React app.

So to retrieve your back-end data from the front-end, you have to do a fetch('http://localhost:3001/'). If you want to avoid repetition, and to prepare for production, you could define your API base URI in a separate file, i.e. a config.js file located at the root of your client source tree:

// general config goes here
const configGlob = {};
// production specific config goes here
const configProd = {
  API_URI: "http://www.example.com/api/v2"
};
// development specific config goes here
const configDev = {
  API_URI: "http://localhost:3001"
};

// merged config
const config = { ...configGlob, process.env.NODE_ENV === 'production' ? ...configProd : ...configDev };
export default config;

And then in your App.js:

import config from './config';
...
fetch(`${config.API_URI}/`)
...

Changing to `fetch('http://localhost:3001/')` did the trick thanks. The only other thing I had to do was enable CORS in my backend. In case anyone get the same error the following code should fix that. `app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); });` — mikeym, Oct 22 '17 at 18:49

× React - fetch('/') won't hit index route in Express.router

1 Answers1