Forums

I'm trying to run my Flask-RESTful API:

import json
from flask import Flask
from flask_restful import Api
from flask_restful import Resource
from flask_cors import CORS

app = Flask(__name__)
api = Api(app)
CORS(app)
data = json.load(open('dictionary.data.json'))


class DictionaryData(Resource):
    def get(self):
        return data


api.add_resource(DictionaryData, '/')

I'm trying to get data with ngResource:

var data = $resource('http://musicharmony.pythonanywhere.com/').get();

Console says: No 'Access-Control-Allow-Origin' header is present on the requested resource.

List of installed Flask modules:

When I run the app locally everything works. My request looks like this:

var data = $resource('http://127.0.0.1:5000/').get();

What should I do? How to solve the problem.

You need to set the access-control-allow-origin header in the headers of the page that is making the cross origin request. Its working in your local environment because you're either not making cross origin requests or because your web app is in debug mode.

not making cross origin requests

The thing is that I'm running my website (from which I send request) on http://127.0.0.1:5500/ and my RESTful API on http://127.0.0.1:5000/. So it only works with CORS module.

set the access-control-allow-origin header in the headers of the page that is making the cross origin request

I thought it is a server-side issue.

How to enable CORS in AngularJS

Your JavaScript can't grant itself permission to access another website.

It is a server-side issue. Your web app needs to return the header that says that a cross-origin request is allowed.

CORS(app) doesn't do it or what?

I don't know the flask cors module, but I would expect that there's some configuration. And, of course, you'd have to be serving the page that contains the script through the app.

Is there a chance that this particular module doesn't work on pythonanywhere?

flask-cors usage

Flask-cors works fine on PAW, check whether the headers are actually being set. They will be set even on local testing (but you won't need them there).

Remember though that if your webapp is throwing certain types of exceptions, it will bypass the CORS middleware and the headers will not be set. Its best to setup a very simple route that does nothing but return a result (like a ping) for testing. You can also set the headers yourself (the plugin is just some decorators etc to make this easier and more selective.)

but you won't need them there

Why?

You can also set the headers yourself

I've tried this:

class DictionaryData(Resource):
    def get(self):
        return data, {'Access-Control-Allow-Origin': '*'}

That looks like you're adding the header to the API response. It has been said over and over that the page making the request needs the header set.

the page making the request

what the fuck is that?

That looks like you're adding the header to the API response. It has been said over and over that the page making the request needs the header set.

Quite right, I get this mixed up myself. So if they are calling from javascript client, then need to set the headers in the request from there. In jQuery, submitting an ajax call you can set crossDomain: true and get it done that way.

i am calling my rest api from a anguler6 app, and it shows me a a "No 'Access-Control-Allow-Origin' header is present" problem. i tried to use "flask_cors" but, if i use "flask_cors" like this ---

from flask_cors import CORS; app = Flask(name); CORS(app);

my api in pythonanywhere just crushed.

what do you mean by your api is crushed? does your whole app fail with 502s? or just your api requests return 403? what are the error messages and stack traces?