Vue клиент заблокирован CORS при вызове облачной функции Google, записанной в Python - PullRequest
Новая
       27

Vue клиент заблокирован CORS при вызове облачной функции Google, записанной в Python

0 голосов
/ 27 апреля 2020

Функция My Cloud очень похожа на пример в документации. Это выглядит так: 

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)

Когда я тестирую эту функцию из пользовательского интерфейса Cloud Functions, она возвращает результаты из Cloud SQL. Однако, когда я вызываю это из Vue, используя следующий код, в консоли выдается следующая ошибка: 

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.

Может ли кто-нибудь помочь мне отладить, почему это происходит? Я думал, что правильно обрабатывал запросы CORS, и когда я проксирую базу данных локально, я даже могу эмулировать функцию и заставить ее работать локально. Однако я не могу заставить его работать на производстве.

РЕДАКТИРОВАТЬ: Вот код на клиенте, который я использую для доступа к этой функции.

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
}

Мой код Vuex: 

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