title: After deploying React app to Heroku from dev env, Fetch requests broken - all GET requests returning index.html - others are 404
body: <p>I have just deployed my Create-React-App project to Heroku. In development, I was running two separate ports - the local HTML + JS were being served from the React <code>WebpackDevServer</code> using the <code>npm/yarn start</code> scripts on Port 3000. The Backend was Express + NodeJS running on port 3001. I configured all fetch requests to use <code>mode:'cors'</code> and provided a handler on the API so to avoid CORS errors. 
  A typical fetch request would look like this:</p>
  
  <p>When I deployed to Heroku, everything is now kept together on a single Dyno, and the Express app serves the React files (bundle + index.html) and also handles backend routing logic.</p>
  
  <p>Here is a sample of my API code so-far:</p>
  
  <pre><code>const express = require('express');
  const mongoose = require('mongoose');
  const path = require('path');
  const bodyParser = require('body-parser');
  const config = require('./models/config');
  require('dotenv').config()
  const app = express();
  const server = require('http').createServer(app);
  
  const storeItems= require('./controllers/storeItems')
  const authorize= require('./controllers/authorize')
  const router = express.Router(); 
  
  mongoose.Promise = global.Promise; 
  mongoose.connect(`mongodb://${process.env.MLABS_USER}:${process.env.MLABS_PW}@ds113000.mlab.com:13000/omninova`, { useMongoClient: true });
  
  app.use(bodyParser.json());
  
  // Middleware to handle CORS in development:
  
  app.use('/*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, x-access-token, x-user-pathway, x-mongo-key, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
    next();
  });
  
  app.use(express.static(path.join(__dirname, 'client/build')));
  
  router.route('/api/storeItem/')
      .get(storeItems.getAllStoreItems)
      .post(storeItems.createNewStoreItem);
  
  router.route('/authorize')
      .post(authorize.login);
  
  // Catch-All Handler should send Client index.html for any request that does not match previous routes
  
  router.route('*')
      .get((req, res) =&gt; {
          res.sendFile(path.join(__dirname+'/client/build/index.html'));
      });
  
  app.use('/', router);
  
  server.listen(config.port);
  module.exports = app;
  </code></pre>
  
  <p>I'm having some issues, ALL of my get requests are returning my index.html page with the following Error: <code>Unexpected token &lt; in JSON at position 0</code></p>
  
  <p>I have the following Fetch Request:</p>
  
  <pre><code>    return fetch(`/api/storeItem`, {
          headers:{
              'Content-Type': 'application/json',
          },
          method: 'GET',
          mode: 'no-cors',
      })
      .then(response =&gt; response.ok ? response.json() : Promise.reject(response))
      .then(json =&gt; {
          dispatch(receiveItems(json))
      })
      .catch(err =&gt; console.log(err))
  </code></pre>
  
  <p>This is failing, because instead of triggering the Express Middleware that should be running <code>storeItems.getAllStoreItems</code> on the backend, It's passing that route and triggering the catch-all handler, which I use to serve the index.html upon initial request:</p>
  
  <pre><code>router.route('*')
      .get((req, res) =&gt; {
          res.sendFile(path.join(__dirname+'/client/build/index.html'));
      });
  </code></pre>
  
  <p>Another confusion is that this following fetch request returns a 404, even though the <code>/authorize</code> route is expecting a POST request in the API code:</p>
  
  <pre><code>export function attemptLogIn(credentials) {
      return dispatch =&gt; {
          return fetch('/authorize', {
          headers:{
              'Content-Type': 'application/json'
          },
          method: 'POST',
          mode: 'no-cors'
          body: JSON.stringify(credentials)
          })
          .then(response =&gt; response.ok ? response.json() : Promise.reject(response.statusText))
          .then(json =&gt; {
              dispatch(routeUserAfterLogin(json.accountType))
          })
          .catch(err =&gt; dispatch(authFail(err.message)))
      }
  } 
  </code></pre>
  
  <p>Any help with this would be highly appreciated. I assume I am doing something wrong with the Express Router, since the authorize route is just not being picked up. </p>
  
  <p>I followed the instructions in this blog post to help me set up my new project: <code>https://daveceddia.com/deploy-react-express-app-heroku/</code></p>
  
  <p>Edit: This is Fetch code from my Development branch. This successfully logs the user in, without returning a 404. However, I do not use the catch-all handler at all, or the express.static middleware:</p>
  
  <pre><code>return fetch('http://localhost:3001/authorize', {
      headers:{
          'Content-Type': 'application/json'
      },
      method: 'POST',
      mode: 'cors', 
      body: JSON.stringify(credentials)
  })
  </code></pre>
  
  <p>Edit: I just changed the URL which points to the bundle.js to 
  <code>app.use(express.static(path.join(__dirname, '/../../build')));</code>
  I'm not sure how I was even sending out the HTML before, since that's the actual location of build files..I'm not sure how they were being found before.</p>
  
  <p>Edit2: Found my problem, I left in the start script for my React project (which actually started the webpack dev server...) </p>