From d51b6269b08e7584f7ab132f49e4e703a8d613a2 Mon Sep 17 00:00:00 2001 From: Eugene Chybisov Date: Wed, 5 Feb 2020 14:03:38 +0200 Subject: [PATCH 1/2] Update proxying-api-requests-in-development.md We should always pass path parameter to app.use and context parameter to proxy, which are almost always the same, except cases mentioned in third Note. app.use mounts the specified middleware function at the specified path: the middleware function is executed when the base of the requested path matches path. proxy first parameter specify context (part of url) which then will be checked whether request url has it or not. This is not necessarily with http requests, but will break WebpackDevServer sockjs-node HMR functionality when we try to proxy some of our own websocket requests. Default context is '/' and because all urls has '/', /sockjs-node from WDS also will be proxied, but it shouldn't. http requests work without specifying context because no one else sends http requests. --- .../docs/proxying-api-requests-in-development.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index 3fdfb778069..0b85aa386b7 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -98,13 +98,19 @@ You can now register proxies as you wish! Here's an example using the above `htt const proxy = require('http-proxy-middleware'); module.exports = function(app) { - app.use( - '/api', - proxy({ + //http requests + app.use('/api', proxy('/api', { target: 'http://localhost:5000', changeOrigin: true, }) ); + //websocket requests + app.use('/ws', proxy('/ws', { + target: 'http://localhost:5000', + changeOrigin: true, + ws: true + }) + ); }; ``` From fcf302184d13e280b54188ca837ec1dd78d3be13 Mon Sep 17 00:00:00 2001 From: Eugene Chybisov Date: Wed, 19 Feb 2020 09:25:07 +0200 Subject: [PATCH 2/2] Update http-proxy-middleware imports as of v1.0.0 --- .../docs/proxying-api-requests-in-development.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index 0b85aa386b7..5756fe7596d 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -85,7 +85,7 @@ $ yarn add http-proxy-middleware Next, create `src/setupProxy.js` and place the following contents in it: ```js -const proxy = require('http-proxy-middleware'); +const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { // ... @@ -95,17 +95,17 @@ module.exports = function(app) { You can now register proxies as you wish! Here's an example using the above `http-proxy-middleware`: ```js -const proxy = require('http-proxy-middleware'); +const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { //http requests - app.use('/api', proxy('/api', { + app.use('/api', createProxyMiddleware('/api', { target: 'http://localhost:5000', changeOrigin: true, }) ); //websocket requests - app.use('/ws', proxy('/ws', { + app.use('/ws', createProxyMiddleware('/ws', { target: 'http://localhost:5000', changeOrigin: true, ws: true @@ -118,4 +118,4 @@ module.exports = function(app) { > **Note:** This file only supports Node's JavaScript syntax. Be sure to only use supported language features (i.e. no support for Flow, ES Modules, etc). -> **Note:** Passing the path to the proxy function allows you to use globbing and/or pattern matching on the path, which is more flexible than the express route matching. +> **Note:** Passing the path to the createProxyMiddleware function allows you to use globbing and/or pattern matching on the path, which is more flexible than the express route matching.