如何在prod中正确地将请求代理到/ api / ressource？

Question

I have a webpack dev configuration with my front end dev server running on 8080 and my backed server running on port 3000.

So in dev mode my webpack dev server is configured like follows :

proxy: {
  '/api': 'http://localhost:3000',
}

How can I do the same thing in the prod server that serves the built static files of my front end ?

I have the following code for my prod server that serves the static files of my front end :

const proxy = require('http-proxy-middleware')

    app.use(express.static(dir))

    /**
     * Redirect everything that starts with /api/* to the backend rest server
     */

    app.use('/api', proxy({ target: backendUrl }))

    app.get('*', (req, res) => {
      res.sendFile(path.resolve(dir + '/index.html'))
    })

This is not working as the cookies seem to be lost with the proxying (unlike with the proxying with webpack where evyrhthing works).

Am I going about this problem in the correct way ?

Answer 1

In this case, you can create a reverse-proxy which is going to receive all the information from the frontend, make the requests to the other address and then return the proper answer to the frontend. I used to develop a lot of these back in the days, there is a package that i created which can help you.

Basically the flow is:

Frontend -> endpoint on your render server (port 8080) -> backend (port 3000) -> render server (port 8080) -> frontend

Answer 2

You can try using:

• A server (iE nginx) as a reverse proxy.
• A node-http-proxy as a reverse proxy.
• A vhost middleware if each domain is served from the same Express codebase and node.js instance.

You may also want to check your cookie flags (changeOrigin, secure, cookieDomainRewrite etc..)

info: IF running http on localhost, the cookie will not be set if secure-flag is present in the response