Can't use Javascript fetch against App Engine behind Users API

0
votes

I have a Flask app that that only admins on the App Engine project can access, by using the the following app.yaml:

version: 1
runtime: python27
api_version: 1
threadsafe: true

handlers:
- url: /.*
  script: app.py
  secure: always
  login: admin

In my app I have an endpoint that simply returns some JSON:

@app.route('/api/v1/data')
def api():
    return jsonify(data)

And in my front-end, I'm trying to fetch the JSON data in Javascript (it works perfectly fine when I'm running the "normal" flask server):

fetch('/api/v1/data')
.then(function (response) {
    console.log(response)
    return response.json();
  }).then(function (myData) {
    doSomethingWithData(myData);
  });

However, I can't fetch the data. Using the local server, I get the following error:

(index):1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

And the response seem to say I'm not logged in and gives me an url in the console log (note: I have not added any type of callback anywhere, I think this comes from the Users API):

http://127.0.0.1:5000/_ah/login?continue=http%3A//127.0.0.1%3A5000/api/v1/data

And on the deployed app I get:

Fetch API cannot load https://www.google.com/accounts/ServiceLogin?service=ah&passive=true&contin....
Redirect from 'https://www.google.com/accounts/ServiceLogin?service=ah&passive=true&contin...'
to 'https://accounts.google.com/ServiceLogin?service=ah&passive=true&continue=...'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the
requested resource. Origin 'https://....appspot.com' is therefore not allowed access.
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the
resource with CORS disabled.

I have tried to add CORS to the fetch call and to the flask response, but without any success. Can't find anything about it when Googling it either, so any help would be much appreciated!

2
javascriptpythonjsongoogle-app-engine
can you see the data if you just navigate to the api url? - dandavis
@dandavis Yes, that works perfectly fine. Both locally and in the deployed app. - Christoffer Karlsson

2 Answers

1
votes

I found the problem after some more debugging.

The Javascript fetch API does not send cookies by default. And since the Users API of Google App Engine uses cookies for logged in sessions, the request made by fetch appears to be unauthenticated. To send the cookies along with the request, you have to add request credentials with 'same-origin' to the fetch call:

fetch('/api/v1/data', { credentials: 'same-origin' })
0
votes

The '<' is probably the start of an error page: <html...

You are not defining data in the function, so that may be where the problem is. Can you show us that code?

@app.route('/api/v1/data')
def api():
    data = ....
    return jsonify(data)

and, the callback to that url will not have admin privileges, so login: admin can't be used there. Try:

handlers:
- url: /api/v1/data
  script: app.py
  #secure: always # if you use this, make sure you specify an https callback url: http://127.0.0.1:5000/_ah/login?continue=https%3A//127.0.0.1%3A5000/api/v1/data (when deployed with production url)

- url: /.*
  script: app.py
  secure: always
  login: admin

Then, continue=https%3A//127.0.0.1%3A5000/api/v1/data can't work from the Google API, as they have no access to your local dev server.