title: How to make API request from react client to express server running on the Heroku platform
body: <p>Ive been trying to deploy a Twitch like application using react, redux, node media server and json server module to Heroku. However, I keep running into a issue when trying to connect my react client and express server via a api request, during production.</p>
  
  <p>Im trying to make the actual request through my action creators and by using axios with a base url of <a href="http://localhost:4000" rel="nofollow noreferrer">http://localhost:4000</a>, however that only works on my local machine.</p>
  
  <pre><code> const response = await streams.get("/streams");
  
   dispatch({ type: FETCH_STREAMS, payload: response.data });
  }; 
  </code></pre>
  
  <p>You can view my full repo at <a href="https://github.com/XorinNebulas/Streamy" rel="nofollow noreferrer">https://github.com/XorinNebulas/Streamy</a></p>
  
  <p>You can also view my current deployed version of the site on Heroku at 
  <a href="https://streamy-app.herokuapp.com/" rel="nofollow noreferrer">https://streamy-app.herokuapp.com/</a></p>
  
  <p>here is my api/server.js file. My express server will be watching on a random port equal to process.env.PORT, so I have no way of knowing how to make a network request via my action creators to that random port during production.</p>
  
  <pre><code>const path = require("path");
  const cors = require("cors");
  const jsonServer = require("json-server");
  const server = jsonServer.create();
  const router = jsonServer.router("db.json");
  const middlewares = jsonServer.defaults({
    static: "../client/build"
  });
  const PORT = process.env.PORT || 4000;
  
  // Set default middlewares (logger, static, cors and no-cache)
  server.use(cors());
  server.use(middlewares);
  
  if (process.env.NODE_ENV === "production") {
    // Add custom routes before JSON Server router
    server.get("*", (req, res) =&gt; {
      res.sendFile(
        path.resolve(__dirname, "../", "client", "build", "index.html")
      );
    });
  }
  
  // Use default router
  server.use(router);
  server.listen(PORT, () =&gt; {
    console.log(`JSON Server is listening on port ${PORT}`);
  });
  </code></pre>
  
  <p>I expected the request to go thru and load up some data from api/db.json, with a resquest url of <a href="https://streamy-app.herokuapp.com/streams" rel="nofollow noreferrer">https://streamy-app.herokuapp.com/streams</a> but instead i got a request url of <a href="http://localhost:4000/streams" rel="nofollow noreferrer">http://localhost:4000/streams</a>, which of course leads to the CORS issue below </p>
  
  <blockquote>
    <p>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <a href="http://localhost:4000/streams" rel="nofollow noreferrer">http://localhost:4000/streams</a>. (Reason: CORS request did not succeed).</p>
  </blockquote>
  
  <p>I would truly appreciate any suggestions, been working on this for days. </p>