title: Enable CORS - Node.js + React/Redux + Axios deployed on Heroku
body: <p>I'm new to React, please keep this in mind.
  For learning purposes I have built a simple React + Redux application that fetches data from an external API in JSON format.</p>
  
  <p>Everything works fine if I manually enable CORS in Chrome (via extension).</p>
  
  <p>Now, I deployed the application to Heroku and I need to permanently enable CORS to be able to access the API.
  Apparently this is more complicated then I thought!</p>
  
  <p>Here'my code:</p>
  
  <p><strong>server.js</strong></p>
  
  <pre><code>const express = require('express');
  const port = process.env.PORT || 8080;
  const app = express();
  const path = require('path');
  const cors = require('cors');
  
  app.use(cors());
  app.use(express.static(__dirname + '/'));
  
  app.get('*', (req, res) =&gt; {
    res.sendFile(path.resolve(__dirname, 'index.html'));
  });
  
  app.listen(port);
  
  console.log("server started");
  </code></pre>
  
  <p><strong>src/index.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware } from 'redux';
  import ReduxPromise from "redux-promise";
  import App from './components/app';
  import reducers from './reducers';
  
  const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);
  
  ReactDOM.render(
    &lt;Provider store={createStoreWithMiddleware(reducers)}&gt;
      &lt;App /&gt;
    &lt;/Provider&gt;
    , document.querySelector('.container'));
  </code></pre>
  
  <p><strong>src/actions/index.js</strong></p>
  
  <pre><code>import axios from 'axios';
  
  const API_KEY = "********************************";
  export const SEARCH_URL = `https://food2fork.com/api/search?key=${API_KEY}`;
  export const FETCH_RECIPES = "FETCH_RECIPES";
  
  export function fetchRecipes(searchTerm) {
      const url = `${SEARCH_URL}&amp;q=${searchTerm}`;
      const request = axios.get(url);
  
      return {
          type: FETCH_RECIPES,
          payload: request
      };
  }
  </code></pre>
  
  <p>Any ideas?</p>