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.
