Unwanted redirect

[skhaz]

I am using HPM to serve a website.

The original website is under the URL https://staging.store.com

And my instance of HPM is under the URL https://staging2.store.com

I am proxying all connections from staging2 to staging and it works.

However, when I click on any link on the website in staging2 I got redirected to staging (non-proxed)

What can I do to solve this?

[chimurai]

If you have absolute links in the html responses. You can rewrite them with responseInterceptor to transparent links (without protocol + host)

https://github.com/chimurai/http-proxy-middleware/blob/master/recipes/response-interceptor.md

[skhaz]

Thank you, that worked flawlessly.

[chimurai]

Glad to hear it worked out. 👍

Do you mind sharing your solution (code example)?
Would be nice to have an example for this use-case for future developers running into this issue.

[skhaz]

For sure.

import type { Options } from 'http-proxy-middleware'

import express from 'express'
import { createProxyMiddleware, responseInterceptor } from 'http-proxy-middleware'

import { PORT, TARGET } from './environment'

const options: Options = {
  target: TARGET,
  changeOrigin: true,
  secure: false,
  
  selfHandleResponse: true,

  onProxyRes: responseInterceptor(async (responseBuffer, proxyRes, req, res) => {
    res.removeHeader('content-security-policy')

    const contentType = proxyRes.headers['content-type']

    if (!contentType?.startsWith('image/')) {
      const response = responseBuffer.toString('utf8')

      const regex = new RegExp('staging', 'g')

      return response.replace(regex, 'staging2')
    }

    return responseBuffer
  }),
}

const proxy = createProxyMiddleware(options)

const app = express()

app.use('/', proxy)

app.listen(PORT, () => {
  process.on('SIGINT', async () => {
    process.exit()
  })
})