'Flask CORS work only for first request, what's the bug in my code?

background

There is a JS app serving at 127.0.0.1:8080, which refers some API serving at 127.0.0.1:5000 by a Flask app. [See FlaskCode]
When I open this js app in Chrome, first request work well and the second request ends with CORS problem, [see ChromeDebug1].
Additionally, I found this 'OPTIONS' is response as 405 (method not allow) in Flask output, and the output from flask_cors is not same like first request. [see FlaskOut].
I'm a newbee in FE and python, so if it is stupid bug, please let me know.
my env is

MacOs M1 version11.1
Chrome Version 87.0
Python 3.8.2
Flask 2.1.1
Werkzeug 2.1.1

question

It seems that flask_cors works only once in my code, but what's wrong?
Look at the difference of first req and second req, seems that second reponse for 'OPTIONS' do not have headers ("Access-Control-Allow-Origin", "*")?
why firest request not have log like flask_cors.extension:Request

====== second edit =========

Thanks for David's advice. I used tcp dump to capture networking, [See wireshark]. This OPTION request is standard in my opinion. So, it lead me to question 4.

why flask print "{"examinationOID":"61e8d2248373a7329e12f29b"}OPTIONS /yd/pass-through/get-examination HTTP/1.1" 405 - while request not have body? Maybe printing is a trash object from last request which is not gc correctly, due to long connection and exception handling?

I have only one python file, and run it with python ./demo2.py --log=INFO

appendix

FlaskCode

# -*- coding: UTF-8 -*-

from flask import Flask
from flask import Response
from flask_cors import CORS, cross_origin
import logging
import json

app = Flask(__name__)
CORS(app, supports_credentials=True)

demoDataPath="xxx"

@app.route("/yd/pass-through/get-examination", methods=['POST'])
@cross_origin()
def getexamination():
    logging.getLogger('demo2').info('into getexamination')
    response = {}
    response["code"]=0
    response["message"]="good end"
    f = open(demoDataPath+"/rsp4getexamination.json", "r")
    response["data"]= json.loads(f.read())
    return Response(json.dumps(response), mimetype='application/json', status=200) 

@app.route("/yd/pass-through/report-config", methods=['POST'])
@cross_origin()
def getconfig():
    logging.getLogger('demo2').info('into getconfig')
    response = {}
    response["code"]=0
    response["message"]="good end"
    f = open(demoDataPath+"/rsp4getreportconfig.json", "r")
    response["data"]= json.loads(f.read())
    return Response(json.dumps(response), mimetype='application/json', status=200) 

if __name__ == '__main__':
    logging.getLogger('flask_cors').level = logging.DEBUG
    logging.getLogger('werkzeug').level = logging.DEBUG
    logging.getLogger('demo2').level = logging.DEBUG
    app.logger.setLevel(logging.DEBUG)
    logging.info("app run")
    app.run(debug=True, threaded=True, port=5001)

ChromeDebug1

FlaskOut

DEBUG:flask_cors.core:CORS request received with 'Origin' http://127.0.0.1:8080
DEBUG:flask_cors.core:The request's Origin header matches. Sending CORS headers.
DEBUG:flask_cors.core:Settings CORS headers: MultiDict([('Access-Control-Allow-Origin', 'http://127.0.0.1:8080'), ('Access-Control-Allow-Headers', 'content-type, traceid, withcredentials'), ('Access-Control-Allow-Methods', 'DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT'), ('Vary', 'Origin')])
DEBUG:flask_cors.extension:CORS have been already evaluated, skipping
INFO:werkzeug:127.0.0.1 - - [21/Apr/2022 20:33:36] "OPTIONS /yd/pass-through/report-config HTTP/1.1" 200 -
[2022-04-21 20:33:36,736] INFO in demo2: into getconfig
INFO:demo2:into getconfig
DEBUG:flask_cors.core:CORS request received with 'Origin' http://127.0.0.1:8080
DEBUG:flask_cors.core:The request's Origin header matches. Sending CORS headers.
DEBUG:flask_cors.core:Settings CORS headers: MultiDict([('Access-Control-Allow-Origin', 'http://127.0.0.1:8080'), ('Vary', 'Origin')])
DEBUG:flask_cors.extension:CORS have been already evaluated, skipping
INFO:werkzeug:127.0.0.1 - - [21/Apr/2022 20:33:36] "POST /yd/pass-through/report-config HTTP/1.1" 200 -
DEBUG:flask_cors.extension:Request to '/yd/pass-through/get-examination' matches CORS resource '/*'. Using options: {'origins': ['.*'], 'methods': 'DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT', 'allow_headers': ['.*'], 'expose_headers': None, 'supports_credentials': True, 'max_age': None, 'send_wildcard': False, 'automatic_options': True, 'vary_header': True, 'resources': '/*', 'intercept_exceptions': True, 'always_send': True}
DEBUG:flask_cors.core:CORS request received with 'Origin' http://127.0.0.1:8080
DEBUG:flask_cors.core:The request's Origin header matches. Sending CORS headers.
DEBUG:flask_cors.core:Settings CORS headers: MultiDict([('Access-Control-Allow-Origin', 'http://127.0.0.1:8080'), ('Access-Control-Allow-Credentials', 'true'), ('Vary', 'Origin')])
DEBUG:flask_cors.extension:CORS have been already evaluated, skipping
INFO:werkzeug:127.0.0.1 - - [21/Apr/2022 20:33:36] "{"examinationOID":"61e8d2248373a7329e12f29b"}OPTIONS /yd/pass-through/get-examination HTTP/1.1" 405 -

wireshark

Solution 1:^[1]

I was getting a similar error: param1=value1&param2=value2GET /css/base.css HTTP/1.1 where the leading params are from a POST request called just before. Setting threaded=False (as @david-k-hess suggested) helped.

The whole story was:

Browser submits a form using POST
Flask server responds with a web page
The web page contains /css/base.css in its head
Browser downloads /css/base.css using GET
Flask server returns HTTP 405 because it thinks the method is param1=value1&param2=value2GET

Fix

Fix 1 suggested by @david-k-hess: In Flask app.run(), add threaded=False

Fix 2: It also seems that the problem was fixed by upgrading Flask and Werkzeug to 2.1.2

My environment:

Python 3.9
Flask 2.1.1
Werkzeug 2.1.1

Other than that, my venv contains:

Jinja2
MarkupSafe
click
colorama
importlib-metadata
itsdangerous
pip
setuptools
wheel
zipp

Solution 2:^[2]

I solve my problem with another "bug" like following. And I still have no idea why my code not work as flask_cors document saied. If you have better solution or advice, please let me know.

@app.after_request
def add_headers(response):
    response.headers.add('Content-Type', 'application/json')
    response.headers.add('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS')
    response.headers.add('Access-Control-Allow-Headers', 'content-type, traceid, withcredentials')
    response.status=200
    logging.getLogger('demo2').info('into add_headers')
    return response

Solution 3:^[3]

The problem appears to be here:

INFO:werkzeug:127.0.0.1 - - [21/Apr/2022 20:33:36] "{"examinationOID":"61e8d2248373a7329e12f29b"}OPTIONS /yd/pass-through/get-examination HTTP/1.1" 405 -

Compare that to:

INFO:werkzeug:127.0.0.1 - - [21/Apr/2022 20:33:36] "OPTIONS /yd/pass-through/report-config HTTP/1.1" 200 -

It is trying to use an invalid HTTP method of {"examinationOID":"61e8d2248373a7329e12f29b"}OPTIONS instead of just plain OPTIONS.

It seems like something is corrupting your CORS headers and confusing Chrome into doing that. A likely source of that would be the Flask-CORS configuration. Is there some setup elsewhere that you haven't shown us? Or is it just using default configuration?

If it is just default, then it would help to see the Javascript code running in Chrome - that might be causing the corrupted method from the first request to the second.

Also, in your chrome dev tools screenshot, you are filtering on 'XHR' - that won't show the OPTIONS requests which will help you figure out what's going wrong. They are shown under 'Other'.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	McLayn
Solution 2	Frank Wang
Solution 3