POST request gets blocked on Python backend. GET request works fine

Question

I am building a web app where the front-end is done with Flutter while the back-end is with Python. GET requests work fine while POST requests get blocked because of CORS, I get this error message:

Access to XMLHttpRequest at 'http://127.0.0.1:8080/signal' from origin 'http://localhost:57765' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Below is my flutter function I used to send GET and POST requests:

  Future<dynamic> sendResponse() async {
    final url = 'http://127.0.0.1:8080/signal';
    var data = {
      "signal": '8',
    };
    var header = {
      'Access-Control-Allow-Origin': '*',
      "Accept": "application/x-www-form-urlencoded, '*'"
    };


    http.Response response = await http.post(Uri.parse(url), body: data, headers: header);//http.post(Uri.parse(url), body: data, headers: header);//http.get(Uri.parse(url));
    if (response.statusCode == 200) {
      print(json.decode(response.body));
      return jsonDecode(response.body);
      //print(json.decode(credentials.body));
    } else {
      print(response.statusCode);
      throw Exception('Failed to load Entry');
    }

   // var ResponseFromPython = await response.body;//jsonDecode(credentials.body);

   // return ResponseFromPython;
  }

Below is my Python backend code using Flask:

   from flask import Flask,jsonify, request, make_response
   import json


   from flask_cors import CORS, cross_origin


   #declared an empty variable for reassignment
   response = ''

   app = Flask(__name__)

   #CORS(app, resources={r"/signal": {"origins": "*, http://localhost:59001"}}) 
   #http://localhost:52857
   #CORS(app, origins=['*'])
   app.config['CORS_HEADERS'] = ['Content-Type','Authorization']



   @app.route("/")
   def index():
    
    return "Congratulations, it worked"

   @app.route("/signal", methods = ['POST', 'GET']) #,
   @cross_origin(origins='http://localhost:57765',headers=['Content-Type','Authorization', 
   'application/x-www-form-urlencoded','*'], upports_credentials=True)# allow all origins all 
   methods.
   def multbytwo():
       """multiple signal by 2 just to test."""
       global response
       if (request.method=='POST'):
       # request.headers.add("Access-Control-Allow-Origin", "*")
           request_data = request.data #getting the response data
           request_data = json.loads(request_data.decode('utf-8')) #converting it from json to key 
   value pair
           comingSignal = request_data['signal']
           response = make_response(comingSignal, 201)#jsonify(comingSignal*2)
           response.headers.add('Access-Control-Allow-Origin', '*')
           response.headers.add('Access-Control-Allow-Methods", "DELETE, POST, GET, OPTIONS')
           response.headers.add('Access-Control-Allow-Headers", "Content-Type, Authorization, X- 
  Requested-With')
           return response
       else:
           try:
        #scaler = request.args.get("signal")
               out = 9 * 2 
         
               response = jsonify(out)
               response.headers.add("Access-Control-Allow-Origin", "*") 
               return response #sending data back to your frontend app

           except ValueError:
               return "invalid input xyz"

   if __name__ == "__main__":
       app.run(host="127.0.0.1", port=8080, debug=True)

Below are the troubleshooting steps I made: -Added the flask_CORS package in python I tried here different combination from using general parameters like CORS(app, resources={r"/signal": {"origins": "*"}}) did not help. Also tried the decorator @cross-origin and did not help

-Added some headers to the response itself to indicate that it accepts cross-origin You see in my python code I tried adding a lot of headers to the response, nothing seem to respond.

-Tried installing an extension in Chrome that by-passes the CORS check I tried the allow CORS and CORS unblock extensions and I used the steps described in this answer: How chrome extensions be enabled when flutter web debugging?. Although these extensions are supposed to add the CORS allow header to the response, I still got the same error.

I still do not fully understand the CORS concept but I tried a lot of work-arounds and nothing works! please help.

Answer 1

Flask has an @app.after_request decorator, this helped me to ensure the headers get added, regardless of what happens in the route

@app.after_request
def add_cors_headers(resp):
    resp.headers.add('Access-Control-Allow-Origin', '*')
    resp.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
    resp.headers.add('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS')

This solved the CORS issues in my case!