Quantcast
Channel: Active questions tagged https - Stack Overflow
Viewing all articles
Browse latest Browse all 1854

Flask-CORS error when using withCredentials over 2 different Ngrok HTTPS domains

$
0
0

I have a Flask backend running behind Ngrok at:

https://1fb0-219-100-161-121.ngrok-free.app

and a React/UMIJS front-end served (also via Ngrok) at:

https://f52f-219-100-161-121.ngrok-free.app

They 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 app

In 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:

  1. Return Access-Control-Allow-Origin set exactly to the requesting origin (e.g. https://f52f-219-100-161-121.ngrok-free.app).
  2. Allow cookies/shared credentials between these two Ngrok-generated HTTPS domains.
  3. 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!


Viewing all articles
Browse latest Browse all 1854

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>