2

I am working on a react Native front and a Python Flask backend. For my POST requests, I sometimes need to provide two additional headers: X-CSRF-TOKEN-ACCESS and X-CSRF-TOKEN-REFRESH for my authentication.

However, my problem is I'm using flask-cors + flask-jwt-extended, and it looks like I'm having some preflight request issues: My front sends the request with both headers, but when the request is received in the POST backend, both headers values are null. During the preflight OPTIONS request, I guess these headers are turned to null...

My question: What do I need to modify in my flask configurations to allow such headers in my requests?

Actual config:

app = Flask(__name__)
    app.config.from_object(APP_CONFIG[CONFIG_ENV])
    cors = CORS(
        app,
        resources={
            "/*": {
                "origins": [          # I am allowing several clients
                    "http://127.0.0.1:19006",
                    "http://192.168.1.38:19006",
                    "http://192.168.1.38",
                    "http://172.20.10.6",
                    "http://172.20.10.6:19006",
                ]
            }
        },
        supports_credentials=True,
        headers=["X-Csrf-Token-Access", "X-Csrf-Token-Refresh", "Content-Type"],
        expose_headers=["X-Csrf-Token-Access", "X-Csrf-Token-Refresh", "Content-Type"],
    )
    APP_CONFIG[CONFIG_ENV].init_app(app)

And the other configs:

class Config:
    SECRET_KEY = os.getenv('SECRET_KEY')
    JWT_SECRET_KEY = os.getenv("JWT_SECRET_KEY")
    JWT_TOKEN_LOCATION = ['cookies']
    JWT_ACCESS_TOKEN_EXPIRES = datetime.timedelta(seconds=1800)
    JWT_COOKIE_SECURE = False
    JWT_REFRESH_TOKEN_EXPIRES = datetime.timedelta(days=15)
    JWT_COOKIE_CSRF_PROTECT = True  # set_refresh_cookies() will now also set the non-httponly CSRF cookies
    JWT_CSRF_CHECK_FORM = True
    JWT_ACCESS_CSRF_HEADER_NAME = "X-CSRF-TOKEN-ACCESS"
    JWT_REFRESH_CSRF_HEADER_NAME = "X-CSRF-TOKEN-REFRESH"

    @staticmethod
    def init_app(app):
        pass

Edit: One more thing. When my React request X-CSRF-TOKE-REFRESH or X-CSRF-TOKE-ACCESS header value is set to a dumb value (for example: "blabla"), then I can clearly see it in backend side.

Abilys38
  • 303
  • 4
  • 16

0 Answers0