title: Firebase project works locally but deployed version outputs CORS error
body: <p>I have a firebase project with hosting for the frontend and a cloud function to handle all the backend requests. When I do firebase serve, and run the project on localhost, everything is fine. But, after deployment, when I try to access it online I get the following error.</p>
  <blockquote>
  <p>Access to XMLHttpRequest has been blocked by CORS policy: Response to
  preflight request doesn't pass access control check: No
  'Access-Control-Allow-Origin' header is present on the requested
  resource.</p>
  </blockquote>
  <p>I have tried all the solutions for enabling CORS in firebase, but the error just doesn't disappear. What is causing this error and what can I do?</p>
  <p><strong>Relevant code in app.js (index.js equivalent) for cloud function</strong></p>
  <pre><code>const functions = require('firebase-functions');
  
  var express = require('express');
  var cors = require(&quot;cors&quot;);
  
  // These contain all the POSTS for the backend
  var routes = require('./server/routes/routes');
  var api = require('./server/routes/api');
  
  var app = express();
  
  app.use('/routes', routes);
  app.use('/api', api);
  app.use(cors({ origin: true }));
  
  exports.app = functions.region('europe-west2').https.onRequest(app);
  </code></pre>
  <p><strong>firebase.json</strong></p>
  <pre><code>{
    &quot;hosting&quot;: {
      &quot;public&quot;: &quot;public/client/dist&quot;,
      &quot;ignore&quot;: [
        &quot;firebase.json&quot;,
        &quot;**/.*&quot;,
        &quot;**/node_modules/**&quot;
      ],
      &quot;rewrites&quot;: [
        {
          &quot;source&quot;: &quot;/api/**&quot;,
          &quot;function&quot;: &quot;app&quot;
        },
        {
          &quot;source&quot;: &quot;/routes/**&quot;,
          &quot;function&quot;: &quot;app&quot;
        },
        {
          &quot;source&quot;: &quot;**&quot;,
          &quot;destination&quot;: &quot;/index.html&quot;
        }
      ],
      &quot;headers&quot;: [
        {
          &quot;source&quot;: &quot;/**&quot;,
          &quot;headers&quot;: [
            {
              &quot;key&quot;: &quot;Cache-Control&quot;,
              &quot;value&quot;: &quot;no-cache, no-store, must-revalidate&quot;
            }
          ]
        },
        {
          &quot;source&quot;:
            &quot;**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)&quot;,
          &quot;headers&quot;: [
            {
              &quot;key&quot;: &quot;Cache-Control&quot;,
              &quot;value&quot;: &quot;max-age=604800&quot;
            }
          ]
        }
      ]
    }
  }
  </code></pre>