title: CORS error on httpsCallable firebase in Create React App
body: <p>SOLVED - See my answer below.</p>
  
  <p>Callable function is causing CORS error like this:</p>
  
  <blockquote>
    <p>Access to fetch at
    '<a href="https://us-central1-careerhub-a50a2.cloudfunctions.net/createUser" rel="noreferrer">https://us-central1-careerhub-a50a2.cloudfunctions.net/createUser</a>'
    from origin '<a href="http://localhost:3000" rel="noreferrer">http://localhost:3000</a>' 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. 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>Function code:</p>
  
  <pre><code>exports.createUser = functions.https.onCall((data, context) =&gt; {
      const email = data.email
      const password = data.password
  
      admin.auth().createUser({
          email: email,
          emailVerified: false,
          password: password
      }).then((res) =&gt; {
          return {
              response: res
          }
      }).catch((err) =&gt; {
          return {err}
      })
  
  })
  </code></pre>
  
  <p>Client-side:</p>
  
  <pre><code>    const handleAddUser = () =&gt; {
        let pswd = passwordGen(7)
        const createUser = firebase.functions().httpsCallable('createUser');
        createUser({email: email, password: pswd}).then(function(result) {
          let res = result.data
          console.log(res)
        }).catch(function(error) {
          console.log(error.code)
        })
  
      }
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "careerhub-web",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@testing-library/jest-dom": "^4.2.4",
      "@testing-library/react": "^9.3.2",
      "@testing-library/user-event": "^7.1.2",
      "antd": "^4.0.2",
      "firebase": "^7.10.0",
      "node-sass": "^4.13.1",
      "react": "^16.13.0",
      "react-dom": "^16.13.0",
      "react-email-editor": "^1.0.0",
      "react-reveal": "^1.2.2",
      "react-router-dom": "^5.1.2",
      "react-scripts": "3.4.0",
      "recharts": "^2.0.0-beta.2"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": {
      "production": [
        "&gt;0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }
  }
  </code></pre>
  
  <p>This error persists even if I'm offline.</p>
  
  <p>Things I've tried:</p>
  
  <ol>
  <li>Updating firebase SDK</li>
  <li>Adding "proxy" : '...' to package.json</li>
  <li>Using basic functions from the cloud functions guides</li>
  <li>Deleting firebase app and deleting function and redeploying</li>
  <li>Adding <code>const cors = require('cors')({origin: true});</code> to function</li>
  </ol>