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.
