Error with CORS (Using Flask on Heroku, requesting from Ionic app)

Question

I'm doing a school project on Ionic and I've decided to create a basic API for my initial needs. I'm using Flask since it's quite simple, but I've hit a wall (after setting up everything and hosting on Heroku) when it comes to the GET request. This is the API code (I'm using mock files instead of a database for now, is it the source of my issues?):

import os
from flask import Flask, send_from_directory
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)

@app.route('/')
def hello():
    return 'API do SIGNCLASS'

@app.route('/files/<path:file>')
@cross_origin()
def sendfile(file):
    return send_from_directory('files', file)

if __name__ == "__main__":
    port = int(os.environ.get("PORT", 5000))
    app.run(host='0.0.0.0', port=port)

And this is the request code (it's Angular by the way)

public getCourse(courseId): Observable<Level[]> {
  const url = `${this.contentUrl}course${courseId}.json`;
  return this.http.get<Level[]>(url)
    .pipe(
        catchError(this.handleError('Obter níveis', []))
    );
}

As you can see I've already set up flask_cors but it's no good, I'm still getting this:

Failed to load https://apiurlishere: No 
'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8100' is therefore not allowed access.

EDIT: I've checked it with Postman and there I can find:

access-control-allow-origin →*

So I'm truly lost.

score 0 · Answer 1 · answered Jul 09 '18 at 00:50

0

So I replicated most of the code you had and ran into an issue using capital "METHODS" instead of lowercase methods in the @app.route decorator.

In the flask error log, I saw this:

TypeError: __init__() got an unexpected keyword argument 'METHODS'

The official docs has the methods keyword in all lowercase as well, so I switched to lowercase and angular received the http response.

answered Jul 09 '18 at 00:50

Alex Williams

21
2

Oh I had actually removed that since I only noticed it after posting. The test on Postman was made without the methods part, but I'll try that. – Soundweaver Jul 09 '18 at 01:05
Just tried it. Nothing changed. I'm starting to think it's related to Ionic in specific. – Soundweaver Jul 09 '18 at 01:07

Soundweaver · Answer 2 · 2018-07-09T02:33:37.433

EDIT: OK I SHOULD PROBABLY TEST MORE STUFF BEFORE POSTING This is working on localhost, but not on Heroku. Still lost.

Apparently, the response is being sent but without a header. And it doesn't show up on the logs. Starting to think that Heroku is to blame now.

//////

Haha, I (NOT REALLY) actually got it working thanks to this Solve Cross Origin Resource Sharing with Flask . So if you arrive here through Google that's where the good stuff is.

My code ended up like this:

import os
from flask import Flask, send_from_directory
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'

@app.route('/')
def hello():
     return 'API do SIGNCLASS'

@app.route('/files/<path:file>', methods=['GET'])
@cross_origin(origin='*',headers=['Content-Type','Authorization'])
def sendfile(file):
     return send_from_directory('files', file)

if __name__ == "__main__":
    port = int(os.environ.get("PORT", 5000))
    app.run(host='0.0.0.0', port=port)

I feel like Postman was a bit misleading.

Error with CORS (Using Flask on Heroku, requesting from Ionic app)

2 Answers2