How can I make an http request to my app engine from a Firebase app on the client side?

Question

I have written a flask app & deployed it to app engine that would run some python scripts and returns some data when I make a POST request to a url something like:

import logging
import firebase_admin
from firebase_admin import firestore
import flask

app = flask.Flask(__name__)
@app.route('/test', methods=['POST'])
def get_data():
    data = flask.request.json
    return flask.jsonify({"test":1000); 

I'm trying to make a POST request like below to the " https://****.appspot.com/test" on the client which is a web app hosted on Firebase hosting but am getting 'Access-Control-Allow-Origin' error.

 fetch('https://***.appspot.com/vrp', {
                method: 'POST',
                data: null
            })
            .then(response => 
              console.log(`response is ` , response.json()))

I saw here that I can edit app.yaml but I can't figure it out. Am I making a mistake?

My app.yaml:

runtime: custom
env: flex
entrypoint: gunicorn -b :$PORT main:app

runtime_config:
  python_version: 3

handlers:
- url: /*
  static_dir: /
  http_headers:
    Access-Control-Allow-Origin: "*"


manual_scaling:
  instances: 1
resources:
  cpu: 1
  memory_gb: 0.5
  disk_size_gb: 10

Answer 1

I ended up using flask_cors and that fixed the problem. Simply use it like below in your main.py or your where you have your code.

import logging
import firebase_admin
from firebase_admin import firestore
import flask
from flask_cors import CORS


app = flask.Flask(__name__)
CORS(app)

@app.route('/test', methods=['POST'])
def get_data():
    data = flask.request.json
    print('@/get_data via route /test method POST with data {}'.format(data))
    return flask.jsonify({"test":1000}); 


if __name__ == '__main__':
    app.run(host='127.0.0.1', port=8080, debug=True)