How do I enable CORS? #421

Jerakin · 2022-03-25T00:04:01Z

Summary: Trying to add CORS to my flask-restx app but failing. Is my setup correct? Can someone see if there is something wrong with my general setup or if flask-restx simply doesn't work with the kind of setup I am trying to accomplish?

I have made a issue on https://github.com/corydolphin/flask-cors (#308) too, but now I am thinking that it's probably on flask-restx side on things maybe.

In the console that is running flask I don't get any relevant logs and the website is saying Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1/api/v1/test. (Reason: CORS request did not succeed). Status code: (null). I don't even get any indication in the logs that the server received an "OPTIONS" request.

I would greatly appreciate it if someone could just run my repro case below so that I at least know that it isn't just my machine.

from flask import Flask
from flask_cors import CORS
from flask_restx import Namespace, Resource, Api
from flask import jsonify, make_response
from flask import Blueprint, render_template_string
import logging

logging.basicConfig()
LOGGER = logging.getLogger("reprod-case")
LOGGER.setLevel(logging.DEBUG)
LOGGER.info("Created LOGGER")
logging.getLogger('flask_cors').level = logging.DEBUG


# Create the restx namespace with a specified path
ns = Namespace(name='api_v1', path="/api/v1")


@ns.route('/test')
class Deck(Resource):
    def get(self):
        print("get")
        return make_response(jsonify({"message": "You did a Get!"}), 200)

    def put(self):
        print("Put")
        return None, 201


html_page = """
<html lang="en">
<body>
<button type="submit" name="myButton" value="Value">Click Me</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('button').on('click',function(e){
        const vote_value = e.currentTarget.attributes.value.value;
        console.log()
        $.ajax({
            type: 'GET',
            crossDomain: true,
            withCredentials: true,
            url: 'http://127.0.0.1/api/v1/test',
            contentType: 'application/json'
        })
    });
});
</script>
</body>
</html>
"""


# Blueprint for the webpage and add a route
bp = Blueprint("/", __name__)


@bp.route('/')
def home_route():
    return render_template_string(html_page)


# Setup the app, Cors, add the namespace and blueprint
def create_app():
    app = Flask(__name__)
    # CORS(app, resources={r"/api/*": {"origins": "*"}},
    CORS(app,
         resources={r"/api/*": {"origins": ['http://192.168.50.16:5000', 'http://localhost:5000']}},
         supports_credentials=True
         )

    api = Api(doc="/api/", title="Endpoints")
    api.add_namespace(ns,  path="/api/v1")
    app.register_blueprint(bp)
    api.init_app(app)
    return app


if __name__ == "__main__":
    app_ = create_app()
    app_.run(debug=True)

Running it with FLASK_ENV=development and simply flask run .

The text was updated successfully, but these errors were encountered:

MMichels · 2022-04-11T19:08:32Z

You need to add a "After request" function on your app definitiion, like:

app = Flask(name)
@app.after_request
def enable_cors(response):
response.headers.add("Access-Control-Allow-Headers", "authorization,content-type")
response.headers.add("Access-Control-Allow-Methods", "DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT")
response.headers.add("Access-Control-Allow-Origin", "*")
return response

Jerakin · 2022-04-12T16:17:08Z

Hi! Did you try to add this in the example I provided? I tried adding it there and it didn't do anything. I tried to add it under if __name__ == "__main__", tried just after it was initialized in create_app(). Also tried to do add it directly without the decorator like so app.after_request(enable_cors). Nothing worked. :(

lvhao54 · 2022-06-29T08:22:06Z

@Jerakin Hi! Have you found a solution?

Jerakin · 2022-09-05T23:11:10Z

Paused working on this part of the website for a while, until a few days ago and am still unable to solve it even with a fresh mindset. Adding to our plight is that this project now looks like it is no longer maintained, in the future I will have to look into migrating away from restx and would recommend others to do the same.

Jerakin added the question Further information is requested label Mar 25, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How do I enable CORS? #421

How do I enable CORS? #421

Jerakin commented Mar 25, 2022 •

edited

MMichels commented Apr 11, 2022 •

edited

Jerakin commented Apr 12, 2022

lvhao54 commented Jun 29, 2022

Jerakin commented Sep 5, 2022 •

edited

How do I enable CORS? #421

How do I enable CORS? #421

Comments

Jerakin commented Mar 25, 2022 • edited

MMichels commented Apr 11, 2022 • edited

Jerakin commented Apr 12, 2022

lvhao54 commented Jun 29, 2022

Jerakin commented Sep 5, 2022 • edited

Jerakin commented Mar 25, 2022 •

edited

MMichels commented Apr 11, 2022 •

edited

Jerakin commented Sep 5, 2022 •

edited