POST 请求在 Python 后端被阻止。 GET 请求工作正常

Question

我正在构建一个 Web 应用程序，其中 front-end 使用 Flutter 完成，而 back-end 使用 Python。 GET 请求工作正常，而 POST 请求由于 CORS 而被阻止，我收到此错误消息：

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.

下面是我用来发送 GET 和 POST 请求的 flutter 函数：

  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;
  }

下面是我使用 Flask 的 Python 后端代码：

   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)

以下是我进行的故障排除步骤： -在 python 中添加了 flask_CORS 包我在这里尝试使用 CORS(app, resources={r"/signal": {"origins": "*"}}) 等一般参数的不同组合没有帮助。还尝试了装饰器@cross-origin但没有帮助

-向响应本身添加一些 header 以表明它接受 cross-origin 您在我的 python 代码中看到，我尝试在响应中添加很多 header，但似乎没有任何响应。

- 尝试在 Chrome 中安装扩展，by-passes CORS 检查 我尝试了 allow CORS 和 CORS unblock 扩展，并使用了此答案中描述的步骤：How chrome extensions be enabled when flutter web debugging?。尽管这些扩展应该将 CORS 允许 header 添加到响应中，但我仍然遇到相同的错误。

我仍然不完全理解 CORS 的概念，但我尝试了很多 work-arounds 但没有任何效果！请帮忙

Answer 1

Flask 有一个 @app.after_request 装饰器，这帮助我确保 headers 得到添加，无论路由

中发生什么

@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')

这解决了我的 CORS 问题！

Answer 2

我终于明白是怎么回事了。 首先，我在 chrome 中使用以下命令禁用了同源策略： 这是运行单击 windows 中的开始按钮并直接键入此命令。 .

chrome.exe  --disable-site-isolation-trials --disable-web-security --user-data-dir="D:\anything"

这触发了一个单独的 chrome window，它不会阻塞 cross-origin，我们将其称为 CORS 免费 window。这使我最终能够与我的 python 代码进行通信并了解发生了什么。

您可以看到 chrome 默认设置甚至没有向我显示与响应相关的任何内容，只显示 500 代码错误。

我复制了本地主机 link 和端口并将它们粘贴到我的另一个 CORS 免费 chrome window 另一个 CORS free chrome window 显示了有用的信息：

这是一个简单的 JSON 解码错误！ 我回到我的 flutter 代码并更改了 http post 请求，添加了一个 [= post 主体上的 12=] 函数：

http.Response response = await http.post(Uri.parse(url), body:jsonEncode(data), headers: header);

现在 post 请求 returns 对默认 chrome 设置的正确响应。正是这个 CORS 完全阻止了响应让我 handi-capped.

POST 请求在 Python 后端被阻止。 GET 请求工作正常

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

python

post

cors

flask

flutter