WebSocket proxy

[jamescostian]

There is a bug report in #5280 that documents the regression, and there's a potential fix in #5841 that was closed by the stale bot. The bot mentioned "If you have a question or comment, please open a new issue" and I have a question: can someone please merge that fix?

[fullstackwebdev]

@jamescostian
until this is fixed, I figured out a way to get around it

if you follow the instructions for "Configure the Proxy Manually" here: https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually

then in the instructions it tells you to create a file src/setupProxy.js

you can put in the following

const proxy = require('http-proxy-middleware');
const URI = process.env.REVERSE_PROXY_URI || 'http://localhost:8000'
module.exports = function(app) {
const apiProxy = proxy('/graphql', {target:URI});
const wsProxy = proxy('/graphql', {ws:true, target:URI});
  app.use(apiProxy);
  app.use(wsProxy);
};

for production you can use this, some old code I had from 2015 helped me figure this out

var express = require('express');

var proxyMiddleware = require('http-proxy-middleware');

var server = process.env.SERVER || 'localhost'

var apiproxy = proxyMiddleware('/graphql', { pathRewrite: { '^/graphql' : 'graphql' }, target:'http://'+server+':8000'});
var wsproxy = proxyMiddleware('/graphql', {ws:true, target:'http://'+server+':8000'});

var app = express();

app.use(apiproxy); // the order here is important
app.use(wsproxy);
app.use(express.static('./'));

app.listen(9000, function () {
});

[LiMengyang990726]

Hi, I have tried the above, while I still have the following problem:

The front-end is making http request to the port itself, instead of the backend port.

Setting:
Front-end port: 3000
Back-end port:8080

What I put in the setupProxy.js:

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

const URI = process.env.REVERSE_PROXY_URI || 'http://localhost:8080'
module.exports = function(app) {
const merchantProxy = proxy('/merchant/', {target:URI});
  app.use(merchantProxy);
};

The way I am doing request:

fetch('/merchant/')
      .then(res => console.log(res)) 

Error message:

Header.js:138 GET http://localhost:3000/merchant/ 404 (Not Found)

How can I force it to use my backend port for fetching?

[jamescostian]

You already have forced it to use your backend port for fetching, and your backend is sending the 404. For example, try curl -v localhost:3000/this-does-not-exist and notice that the server responds with a 200 - that's because the dev server always responds with 200s, thinking that you have the frontend in charge of routing. The fact that you're getting a 404 means that you aren't talking to the dev server anymore, you're talking to your own server. You can also try curl -v localhost:8080/merchant/ to confirm this.

[LiMengyang990726]

I have tested sending GET request to backend localhost:8080/merchant/ and it works properly.

According to the error message "GET http://localhost:3000/merchant/ 404 (Not Found)", it's trying to send GET request to localhost:3000/merchant/ instead of sending GET request localhost:8080/merchant/, which also explains the reason why there is a page not found.

So I think it looks like const merchantProxy = proxy('/merchant/', {target:URI}); is not working.

[jamescostian]

But that message is coming from the frontend, right? The frontend is talking to localhost:3000, but the dev server listening on localhost:3000 is forwarding to localhost:8080. That's why the frontend says localhost:3000, because it doesn't know that the request is being forwarded. And your code in setupProxy.js looks perfect, I have basically the exact same code and it works perfectly for me.

Here's another example. Change your frontend code to fetch('/does-not-exist/').then(res => console.log(res)). You won't get a 404 error, you'll get a 200. Why do you get a 200 when that doesn't exist? Because it's not being proxied. But when you fetch('/merchant/').then(res => console.log(res)) you get a 404. Why do you get a 404? Because it is being proxied to localhost:8080. Just make this test and you'll see what I mean. You could try console.log(URI) and make sure that your URI isn't being overridden by an environment variable called REVERSE_PROXY_URI, but other than that I don't have any pointers beyond "it's your backend, not your frontend or the proxy, that's giving you the 404"

EDIT: one idea I have is it could be an INSANELY specific bug (e.g. the backend is 404ing because your frontend user has certain cookies, or because you have a certain Referrer header, etc.). Try going to the network tab on Chrome after your frontend makes the request to /merchant/, and right-click on the request to /merchant/ and copy it as a cURL command. You can then paste that into your terminal and change the port from 3000 to 8080, and see what happens.

[LiMengyang990726]

Thank you very much for your detailed explanation! I have understand now and the problem has been solved!

It's because that the request path is not correct. Just double check if the proxy path is consistent with your backend path, should be fine!

[nartoland]

Ok

[iansu]

There's a new PR to fix this issue in #6515.