Solve Cross Origin Resource Sharing with Flask

Question

For the following ajax post request for Flask  how can I use data posted from ajax in flask       ajax       url   http   127 0 0 1 5000 foo        type   POST       contentType   application json       data  JSON stringify   inputVar   1        success  function  data              alert   success    data                   I get a Cross Origin Resource Sharing  CORS  error   No  Access-Control-Allow-Origin  header is present on the requested resource   Origin  null  is therefore not allowed access   The response had HTTP status code 500    I tried solving it in the two following ways  but none seems to work    Using Flask-CORS   This is a Flask extension for handling CORS that should make cross-origin AJAX possible    http   flask-cors readthedocs org en latest  How to enable CORS in flask and heroku Flask-cors wrapper not working when jwt auth wrapper is applied  Javascript - No   39 Access-Control-Allow-Origin  39  header is present on the requested resource   My pythonServer py using this solution   from flask import Flask from flask ext cors import CORS  cross origin  app   Flask   name    cors   CORS app  resources  r  foo     origins          app config  CORS HEADERS      Content-Type    app route   foo   methods   POST   OPTIONS     cross origin origin     headers   Content-Type   Authorization    def foo        return request json  inputVar    if   name         main         app run      Using specific Flask Decorator   This is an official Flask code snippet defining a decorator that should allow CORS on the functions it decorates    http   flask pocoo org snippets 56  Python Flask cross site HTTP POST - doesn  39 t work for specific allowed origins http   chopapp com  351l7gc3   My pythonServer py using this solution   from flask import Flask  make response  request  current app from datetime import timedelta from functools import update wrapper  app   Flask   name     def crossdomain origin None  methods None  headers None                  max age 21600  attach to all True                  automatic options True       if methods is not None          methods        join sorted x upper   for x in methods       if headers is not None and not isinstance headers  basestring           headers        join x upper   for x in headers      if not isinstance origin  basestring           origin        join origin      if isinstance max age  timedelta           max age   max age total seconds        def get methods            if methods is not None              return methods          options resp   current app make default options response           return options resp headers  allow        def decorator f           def wrapped function  args    kwargs               if automatic options and request method     OPTIONS                   resp   current app make default options response               else                  resp   make response f  args    kwargs               if not attach to all and request method     OPTIONS                   return resp              h   resp headers              h  Access-Control-Allow-Origin     origin             h  Access-Control-Allow-Methods     get methods               h  Access-Control-Max-Age     str max age              if headers is not None                  h  Access-Control-Allow-Headers     headers             return resp          f provide automatic options   False         return update wrapper wrapped function  f      return decorator   app route   foo   methods   GET   POST   OPTIONS     crossdomain origin      def foo        return request json  inputVar    if   name         main         app run     Can you please give some some indication of why that is

User · Answer

You can get the results with a simple    app route  your route   methods   GET    def yourMethod params       response   flask jsonify   some    data        response headers add  Access-Control-Allow-Origin            return response

User · Answer

Might as well make this an answer  I had the same issue today and it was more of a non-issue than expected  After adding the CORS functionality  you must restart your Flask server  ctrl   c -  python manage py runserver  or whichever method you use   in order for the change to take effect  even if the code is correct  Otherwise the CORS will not work in the active instance   Here s how it looks like for me and it works  Python 3 6 1  Flask 0 12    factory py   from flask import Flask from flask cors import CORS    This is the magic   def create app register stuffs True          Configure the app and views        app   Flask   name        CORS app     This makes the CORS feature cover all routes in the app      if register stuffs          register views app      return app   def register views app          Setup the base routes for various features         from backend apps api views import ApiView     ApiView register app  route base   api v1 0      views py   from flask import jsonify from flask classy import FlaskView  route   class ApiView FlaskView        route      methods   GET        def index self           return  API v1 0        route   stuff   methods   GET    POST        def news self           return jsonify                stuff    Here be stuff               In my React app console log   Sending request  GET  stuff With parameters  null bundle js 17316 Received data from Api    stuff    Here be stuff

User · Answer

It worked like a champ  after bit modification to your code     initialization app   Flask   name    app config  SECRET KEY      the quick brown fox jumps over the lazy   dog  app config  CORS HEADERS      Content-Type   cors   CORS app  resources  r  foo     origins    http   localhost port       app route   foo   methods   POST     cross origin origin  localhost  headers   Content- Type   Authorization    def foo        return request json  inputVar    if   name         main        app run     I replaced   by localhost  Since as I read in many blogs and posts  you should allow access for specific domain

User · Answer

I might be a late on this question but below steps fixed the issue from flask import Flask from flask cors import CORS  app   Flask   name    CORS app

User · Answer

I struggled a lot with something similar  Try the following    Use some sort of browser plugin which can display the HTML headers  Enter the URL to your service  and view the returned header values  Make sure Access-Control-Allow-Origin is set to one and only one domain  which should be the request origin  Do not set Access-Control-Allow-Origin to      If this doesn t help  take a look at this article  It s on PHP  but it describes exactly which headers must be set to which values for CORS to work   CORS That Works In IE  Firefox  Chrome And Safari

User · Answer

I used decorator given by Armin Ronacher with little modifications  due to different headers that are requested by the client  And that worked for me   where I use angular as the requester requesting application json type    The code is slightly modified at below places   from flask import jsonify   app route   my service   methods   POST    GET   OPTIONS     crossdomain origin     headers   access-control-allow-origin   Content-Type    def my service        return jsonify foo  cross domain ftw     jsonify will send a application json type  else it will be text html  headers are added as the client in my case request for those headers   const httpOptions           headers  new HttpHeaders            Content-Type    application json            Access-Control-Allow-Origin                          return this http post lt any gt  url  item httpOptions

User · Answer

Note  The placement of cross origin should be right and dependencies are installed  On the client side  ensure to specify kind of data server is consuming  For example application json or text html  For me the code written below did magic  from flask import Flask request jsonify from flask cors import CORS cross origin app Flask   name    CORS app  support credentials True   app route   api test   methods   POST    GET   OPTIONS     cross origin supports credentials True  def index        if request method   POST         some json request get json        return jsonify   key  some json       else          return jsonify   GET   GET      if   name       main         app run host  0 0 0 0   port 5000

User · Answer

Well  I faced the same issue  For new users who may land at this page   Just follow their official documentation    Install flask-cors  pip install -U flask-cors   then after app initialization  initialize flask-cors with default arguments   from flask import Flask from flask cors import CORS  app   Flask   name    CORS app    app route      def helloWorld       return  Hello  cross-origin-world

User · Answer

Note that setting the Access-Control-Allow-Origin header in the Flask response object is fine in many cases  such as this one   but it has no effect when serving static assets  in a production setup  at least   That s because static assets are served directly by the front-facing web server  usually Nginx or Apache   So  in that case  you have to set the response header at the web server level  not in Flask   For more details  see this article that I wrote a while back  explaining how to set the headers  in my case  I was trying to do cross-domain serving of Font Awesome assets    Also  as  Satu said  you may need to allow access only for a specific domain  in the case of JS AJAX requests  For requesting static assets  like font files   I think the rules are less strict  and allowing access for any domain is more accepted

[javascript] Solve Cross Origin Resource Sharing with Flask

Examples related to javascript

Examples related to python

Examples related to ajax

Examples related to flask

Examples related to cors