I have a Flask backend running behind Ngrok at:
https://1fb0-219-100-161-121.ngrok-free.appand a React/UMIJS front-end served (also via Ngrok) at:
https://f52f-219-100-161-121.ngrok-free.appThey must share session cookies, so all Axios calls set withCredentials: true.
What I’ve tried:In my app/init.py, I configured CORS like this:
import osfrom flask import Flask,sessionfrom flask_cors import CORSfrom flask_session import Session from app.config import Configfrom app.extentions import db, mail, bcryptdef create_app(): app = Flask(__name__) app.config.from_object(Config) app.config['SESSION_TYPE'] = 'filesystem' app.config['SESSION_PERMANENT'] = False app.config['SESSION_USE_SIGNER'] = True app.config['SESSION_COOKIE_HTTPONLY'] = True if os.getenv("FLASK_ENV") == "production": app.config['SESSION_COOKIE_SAMESITE'] = 'None' app.config['SESSION_COOKIE_SECURE'] = True else: app.config['SESSION_COOKIE_SAMESITE'] = 'Lax' app.config['SESSION_COOKIE_SECURE'] = False Session(app) db.init_app(app) mail.init_app(app) bcrypt.init_app(app) CORS(app, supports_credentials=True, origins=["http://localhost:8000","https://f52f-219-100-161-121.ngrok-free.app", ], methods=["GET", "POST", "PUT", "DELETE", "OPTIONS"], allow_headers=["Content-Type", "Authorization", "ngrok-skip-browser-warning"], expose_headers=["Set-Cookie", "Access-Control-Allow-Origin"], max_age=3600) return appIn my backend\run.py is:
from app import create_appfrom app.routes import register_routesimport pytztz = pytz.timezone('Asia/Tokyo')app = create_app()register_routes(app)@app.after_requestdef after_request(response): print("Access-Control-Allow-Origin:", response.headers.get('Access-Control-Allow-Origin')) return responseif __name__ == "__main__": app.run(host='localhost', port=5000, debug=True)i see in backend's terminal and it's always Access-Control-Allow-Origin:None.
And in my React code I call:
await axios.get( `${process.env.UMI_APP_API_URL}/page-booking-step1/${code}`, { withCredentials: true });with UMI_APP_API_URL in frontend\.env is UMI_APP_API_URL=https://1fb0-219-100-161-121.ngrok-free.app.
The error:
Access to XMLHttpRequest at 'https://1fb0-219-100-161-121.ngrok-free.app/page-booking-step1/...'from origin 'https://f52f-219-100-161-121.ngrok-free.app'has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request’s credentials mode is 'include'.What I need:I want Flask-CORS to:
- Return Access-Control-Allow-Origin set exactly to the requesting origin (e.g. https://f52f-219-100-161-121.ngrok-free.app).
- Allow cookies/shared credentials between these two Ngrok-generated HTTPS domains.
- Avoid using UmiJS’s proxy or rewriting all calls through /api.
Specific questions
- How can I configure Flask-CORS (or Flask’s headers) so that it reflects the real Origin header instead of * when supports_credentials=True?
- Is there a recommended pattern for dynamic origins (Ngrok URLschange) while still permitting withCredentials?
Any guidance or working example would be greatly appreciated!