Proxy all requests to "/api/*" using "setupProxy.js"

[alinnert]

The proxy property in package.json doesn't quite do what is needed for my current project. The API provides some endpoints that are meant to be used as iFrame-URLs. If I use an API URL inside an iFrame while using the simple proxy property API calls caused by those iFrames don't get proxied because they include the header Accept: text/html. The result is that the iFrame displays the entire app instead of the API response. (Which is also funny because you can create an "appception" that way)

So I switched to setupProxy.js. The examples in the docs show a simple setup that looks like it should work the same way. But it doesn't. It causes the API server to respond with 403 Forbidden. The server (Java, Spring) produces the log Reject: 'https://localhost:9080' origin is not allowed. Where localhost:9080 is the URL where the React app is served by CRA.

The solution I found is to delete the origin header like this:

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

module.exports = app => {
  app.use(
    '/api',
    (req, res, next) => {
      if (req && req.headers && req.headers.origin) {
        delete req.headers.origin
      }

      next()
    }
  )


  app.use('/api', proxy({ target: ' ...URL of the server... ' }))
}

Neither changeOrigin: true nor changeOrigin: false work for me. So it seems the proxy property also implicitly removes the origin header.

This basically now proxies all requests that target /api/*, no matter what the value of the Accept header is.

I wanted to share this, maybe it helps some people out there.

Also, if someone knows how to improve this, please tell me and I'll update the code.