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

The `headers` configuration is only supported in the [standard environment `app.yaml` file](https://cloud.google.com/appengine/docs/standard/python/config/appref#handlers_element), not in [the flexible one](https://cloud.google.com/appengine/docs/standard/python/reference/app-yaml). I *think* you may need to explicitly set the CORS headers in your app. — Dan Cornilescu, Feb 05 '19 at 21:34
@DanCornilescu, thanks for the comment. I think I figured it out using flask_cors. Posted an answer. — TheeBen, Feb 05 '19 at 21:44

score 1 · Accepted Answer · answered Feb 05 '19 at 21:44

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)

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

1 Answers1