title: How to fix "Response to preflight request doesn't pass access control check: It does not have HTTP ok status" error in react app with nodejs api
body: <p>I have been trying to do an api call (nodejs with express running on localhost) from a react app running in the browser over a local dev server (web-pack dev server). Everything was working well until I tried to call the api. They are both running on separate ports.</p>
  
  <p>I have tried adding the cors headers (Recommended by MDN) to both the post call (from the app in browser) and to the response from the Nodejs API but neither of these solved the issue.</p>
  
  <p>Code for the api call (in browser):</p>
  
  <pre><code>const headers = {
    'Content-Type': 'application/json',
    'access-token': '',
    'Access-Control-Allow-Origin': '*',
  }
  
  export default async () =&gt; {
    try {
      const body = JSON.stringify({
        test: true,
      })
      const response = await fetch('http://localhost:1337/internal/provider/check_email_exist', {
        method: 'POST',
        headers,
        body,
      })
      console.log(response)
    } catch (e) {
      return e
    }
  }
  </code></pre>
  
  <p>API Middleware (in nodejs):</p>
  
  <pre><code>// Verify All Requests
  app.use(VerifyToken)
  
  // Compress
  app.use(compression())
  
  // Helmet middlware
  app.use(helmet())
  
  // Body Parser
  app.use(bodyParser.urlencoded({
    extended: false,
  }))
  app.use(bodyParser.json())
  </code></pre>
  
  <p>The expected result is to just give a 200 status code and respond with the data.</p>
  
  <p>The actual output is:</p>
  
  <pre><code>OPTIONS http://localhost:1337/internal/provider/check_email_exist 404 (Not Found)
  </code></pre>
  
  <pre><code>Access to fetch at 'http://localhost:1337/internal/provider/check_email_exist' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
  </code></pre>