reactjsflaskhttp-proxy-middlewareflask-jwt-extendedcookie-path

Flask-JWT-Extended: Ensure Refresh Cookie is Sent Only on `/refresh` but also on URLs with prefixes like `/api/refresh`


I am using Flask with the flask-jwt-extended library for authentication, and I have encountered an issue with the refresh cookie. My setup includes:

The Problem:

Node.js Proxy (setupProxy.js):

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

What I Want to Achieve:

I want the refresh cookie to be sent only for requests to /refresh, but I also need it to work:

What I Have Tried

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

to

module.exports = function(app) {
  app.use(
    '/',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

but after this, even access to React app(http://localhost:3000) is redirected to http://localhost:5000

Question:

How can I configure flask-jwt-extended and/or http-proxy-middleware so that the refresh cookie is sent only on /refresh, while also allowing it to work correctly when requested from both direct backend access and through the React frontend proxy (/api/refresh)?

Any advice or suggestions would be greatly appreciated!


Solution

  • o3-mini suggested me to add cookiePathRewrite to setupProxy.js and it solved my problem:

    const {createProxyMiddleware} = require('http-proxy-middleware');
    module.exports = function (app) {
        app.use(
            '/api',
            createProxyMiddleware({
                target: 'http://localhost:5000',
                changeOrigin: true,
                cookiePathRewrite: {
                    '/refresh': '/api/refresh',
                },
            })
        );
    };