title: CORS error with NodeJS Express and ReactJS
body: <p>before anything else, I want to say, that I have read about 12 similar questions on the StackOverflow, but none of them helped me to solve my issue and most of them had pretty unclear answers, so I believe that this question is worth asking, also I'm just a beginner.</p>
  
  <h1>Environment:</h1>
  
  <p>I have a react app running on <code>localhost</code> on port <code>3000</code> and an Express server on port <code>8000</code>. My server:</p>
  
  <pre><code>const express = require('express');
  const app = express();
  
  const port = 8000;
  
  app.post('/register', (req, res) =&gt; {
      res.send(JSON.stringify({test: 'HELLO!'}));
  });
  
  const server = app.listen(port, () =&gt; console.log('Listening on port', server.address().port));
  </code></pre>
  
  <p>And client:</p>
  
  <pre><code>static register(username, password) {
      return fetch('http://localhost:8000/register', {
        method: 'POST',
        body: JSON.stringify({username, password}),
        headers: {'Content-Type': 'text/plain'}
      }).then(response =&gt; console.log(response));
    }
  </code></pre>
  
  <p>When sending this request I would get this error message:</p>
  
  <blockquote>
    <p>Failed to load <a href="http://localhost:8000/register" rel="nofollow noreferrer">http://localhost:8000/register</a>: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a>' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. </p>
  </blockquote>
  
  <p>After some research I tried some solutions:
  Adding this middleware before "POST" on my server:</p>
  
  <pre><code>app.all('/*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
  
    next();
  });
  </code></pre>
  
  <p>It didn't help, so I've tried node <a href="https://github.com/expressjs/cors" rel="nofollow noreferrer">CORS</a> package and still, it didn't solve my issue. But something has changed: I was no longer getting this error message instead, I would get the response logged, but instead of getting an object that I have sent from the server, I was getting some kind of 'error object':</p>
  
  <pre><code>bodyUsed: false
  headers: Headers {}
  ok: true
  redirected: false
  status: 200
  statusText: "OK"
  type: "cors"
  url: "http://localhost:8000/register"
  </code></pre>
  
  <p>But, when I opened a network tab in Chrome, I saw that the response was what I expected <code>{test: HELLO!}</code>, so Chrome was changing something, so I have disabled Chrome security, but it still was logging the same error object. So after trying all of this, I couldn't make my code work, so can anyone fully answer how to send requests from React app to the express server without getting cors error?</p>
  
  <p>Full server code:</p>
  
  <pre><code>const express = require('express');
  const cors = require('cors');
  const app = express();
  
  const port = 8000;
  
  app.all('/*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
  
    next();
  });
  
  app.post('/register', (req, res) =&gt; {
      res.send(JSON.stringify({test: 'HELLO!'}));
  });
  
  const server = app.listen(port, () =&gt; console.log('Listening on port', server.address().port));
  </code></pre>