Vue client blocked by CORS when calling Google Cloud Function written in Python

Question

My Cloud Function is very similar to the example in the docs. It looks like this:

def states(request):
    """Responds to any HTTP request.
    Args:
        request (flask.Request): HTTP request object.
    Returns:
        All states in the database.
    """
    if request.method == 'OPTIONS':
        headers = {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'POST',
            'Access-Control-Allow-Headers': '*'
        }
        return ('', 204, headers)

    # request_json = request.get_json()
    headers = {
        'Access-Control-Allow-Origin': '*'
    }
    stmt = 'SELECT * FROM states'
    try:
        with db.connect() as conn:
            response = conn.execute(stmt)
        states_dict = {}
        for row in response:
            states_dict[row['name']] = str(row)
        print(states_dict)
        return ({'data': states_dict}, 200, headers)
    except Exception as e:
        error = 'Error: {}'.format(str(e))
        print(error)
        return (error, 200, headers)

When I test this function from the Cloud Functions UI, it returns results from Cloud SQL. However, when I call this from Vue using the following code, it gives me the following error in the console:

Access to fetch at 'https://<myappinfohere>.cloudfunctions.net/states' from origin 'https://myappinfohere.web.app' 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.

Can someone help me debug why this is happening? I thought I handled CORS requests properly, and when I proxy the database locally I can even emulate the function and get it working locally. I cannot get it working in production, however.

EDIT: Here is the code on the client I'm using to access this function.

db.js

import firebase from 'firebase'

const config = {
  apiKey: REDACTED
  authDomain: REDACTED,
  databaseURL: REDACTED,
  projectId: REDACTED,
  storageBucket: REDACTED,
  messagingSenderId: REDACTED,
  appId: REDACTED,
  measurementId: REDACTED
}

const app = firebase.initializeApp(config)
// app.functions().useFunctionsEmulator('http://localhost:8081')
const db = firebase.firestore()
var gcFunc = firebase.functions().httpsCallable('states')

export {
  db,
  gcFunc,
  app
}

My Vuex code:

const fb = require('@/db.js')
...
fb.gcFunc({}).then((result) => {
   context.commit('setAllStates', Object.values(result.data))
})