Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • C create-react-app
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1,547
    • Issues 1,547
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 417
    • Merge requests 417
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Meta
  • create-react-app
  • Merge requests
  • !9326

Pass server to user provided proxy middleware.

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge github/fork/mirek/pass-server-to-proxy-setup into master Jul 18, 2020
  • Overview 5
  • Commits 1
  • Pipelines 0
  • Changes 2

Created by: mirek

Currently when using custom proxy with src/setupProxy.js there is no way to manually register protocol upgrade for target services providing websocket connections.

This means that if the first request to the proxy happens to be a websocket connection, the request will hang.

This PR adds backward compatible server as 2nd parameter to proxy setup provided by the user. This allows to register protocol upgrade handler manually and avoid problems with first proxy request being websocket connection request.

Currently not pretty workarounds are required [1] or:

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

module.exports = function (app) {

  app.use(
    '/api',
    createProxyMiddleware({
      target: `http://localhost:${process.env.REACT_APP_MY_BACKEND_PORT}`,
      changeOrigin: true,
      ws: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  )

  // HACK: http-proxy-middleware relies on a initial http request in order to listen to the http upgrade event.
  const retry = () => {
    setTimeout(() => {
      http.get(`http://localhost:${process.env.PORT || 3000}/api/health-or-something-else`, res => {
        const { statusCode } = res
        if (statusCode !== 200) {
          retry()
        }
      })
    }, 1000)
  }
  retry()

}

With this patch applied, proxy setup can manually register protocol upgrade handler:

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

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

[1] https://github.com/chimurai/http-proxy-middleware/issues/432

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: github/fork/mirek/pass-server-to-proxy-setup