title: Firebase CORS XMLHttpRequest has been blocked problem
body: <p>I have looked at almost every StackOverflow problem regarding the CORS issue by Firebase and none of them have seemed to work. </p>
  
  <p>I have some cloud functions on Firebase Functions that upload an image if the user is authenticated. I have two files: <code>index.js</code> and <code>user.js</code>. </p>
  
  <p>Snippet from <code>index.js</code>:</p>
  
  <pre><code>const functions = require("firebase-functions");
  const FBAuth = require("./util/fbAuth");
  const app = require("express")();
  
  const cors = require("cors")({origin: true});
  app.use(cors);
  
  // FBAuth gets a bearer token from firebase and authenticates
  app.post("/user/image", FBAuth, uploadImage);
  
  exports.api = functions.https.onRequest(app);
  
  </code></pre>
  
  <p>Snippet from <code>user.js</code></p>
  
  <pre><code>exports.uploadImage = (req, res) =&gt; {
    const BusBoy = require('busboy');
    const path = require('path');
    const os = require('os');
    const fs = require('fs');
  
    const busboy = new BusBoy({ headers: req.headers });
  
    let imageToBeUploaded = {};
  
    busboy.on('file', (fieldname, file, filename, encoding, mimetype) =&gt; {
      if (mimetype !== 'image/jpeg' &amp;&amp; mimetype !== 'image/png') {
        return res.status(400).json({ error: 'Wrong file type submitted' });
      }
  
      const filepath = path.join(os.tmpdir(), filename);
      imageToBeUploaded = { filepath, mimetype };
      file.pipe(fs.createWriteStream(filepath));
    });
    busboy.on('finish', () =&gt; {
      admin
        .storage()
        .bucket()
        .upload(imageToBeUploaded.filepath, {
          resumable: false,
          metadata: {
            metadata: {
              contentType: imageToBeUploaded.mimetype
            }
          }
        })
        .then(() =&gt; {
          const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${
            config.storageBucket
          }/o/${imageFileName}?alt=media`;
          return db.doc(`/users/${req.user.handle}`).update({ imageUrl });
        })
        .then(() =&gt; {
          return res.json({ message: 'image uploaded successfully' });
        })
        .catch((err) =&gt; {
          console.error(err);
          return res.status(500).json({ error: 'something went wrong' });
        });
    });
    busboy.end(req.rawBody);
  };
  
  </code></pre>
  
  <p><strong>Frontend</strong> in redux/React hosted by Firebase web app:</p>
  
  <pre><code>export const uploadImage = (formData) =&gt; (dispatch) =&gt; {
    dispatch({ type: LOADING_USER });
    axios
      .post("/user/image", formData)
      .then(() =&gt; {
        dispatch(getUserData());
      })
      .catch((err) =&gt; console.log(err));
  };
  
  </code></pre>
  
  <p>What I've tried:</p>
  
  <p>I tried using <code>gsutil cors set cors.json</code>. The problem is all of my other functions work fine, it's only when I upload an image to google storage it fails.</p>
  
  <p><strong>The error:</strong></p>
  
  <blockquote>
    <p>Access to XMLHttpRequest at 'cloudfunction/user/image' from origin 'link.firebaseapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.</p>
  </blockquote>
  
  <p>What am I doing wrong?</p>