Port Forwarding returns 502 Bad Gateway

[hashfx]

When running a react app on port 3000, and Express API on port 5000 gives 502 Bad Gateway Error.

[augustoaraujoo]

try running this command in your terminal, here is how to run it, killall node --> https://stackoverflow.com/questions/14790910/stop-all-instances-of-node-js-server,

then try to activate the app

[hashfx]

Thanks for your reply.
I killed the whole setup and rebuild it, still it didn't work. The server won't work in between (shows 502 error) but would work after sometime (no idea why this happens). May be it's from "their" side👀

[jaclynj]

Is this on web or the vscode desktop extension?

Are you seeing an error in your server logs?

[hashfx]

This is on web. There's no error in server log, it's directly rendered on the screen.

[legomushroom]

@hashfx did you try to switch port protocol(HTTP vs HTTPS) in the ports view in the VSCode? Sometime the service fails to detect a correct protocol, so switching to a correct one manually might help. You can right-click on the port -> Change Port Protocol -> select HTTP or HTTPS.

[hashfx]

Yeah I did, this error is occasional. Server runs for sometime, gets 502 error, starts running again after sometime.

[nightpool]

I'm having the same issue on web. It seemed to happen after I rebuilt my container

[azzazkhan]

I am getting the same issue, using my custom-built template (azzazkhan/dev-container).

[jnewland]

I've had a support ticket open with GitHub since April regarding a similar issue: I'm able to consistently reproduce a 502 on Codespaces port forwarding by starting a Codespace that uses Docker Compose in its devcontainer configuration, forwarding a port, and then rebuilding the Codespace. This behavior is quite frustrating as it is often triggered while I'm iterating on my organization's Codespaces configuration, adding to the complexity of the already-time-consuming process of QAing these sorts of changes.

https://github.com/jnewland/devcontainer-example/tree/docker-compose-port-forward demonstrates the behavior, or did the last time I tested it.

GitHub support has advised me that a workaround for this problem is to stop forwarding the port before rebuilding the Codespace, which I haven't yet successfully validated as I only remember this bug when I experience the 502, not beforehand. Disabling port forwarding and re-enabling it doesn't seem to resolve the issue once you experience it: at this point I generally delete the Codespace and recreate it.

[ankur0101]

I have started to observe this error at my codespace when I reach 75% of the free quota. I use python flask, generally after running command flask --debug run, it automatically starts forwarding port under ports tab. However in recent days, it has become very inconsistent :-(

[jnewland]

Support has let me know that this problem has been resolved.

[betaglot]

It has not been resolved!!

[mrhoodz]

Im also having this problem

[PaulDMendoza]

I think I'm also having this issue. I'm using docker compose.

[NidhoggDJoking]

I am getting the same issue!
It has not been resolved

[jetadidas]

Just happened to me right in the middle if a build!

[aitchjoe]

I had the same issue, but when I tried:

docker run -d -p 127.0.0.1:8080:80 docker.io/nginx

It is ok. So I used ss -ltn to check the difference and found that nginx bound to 127.0.0.1:8080 but my app bound to [::1]:3000, then I changed my webpack-dev-server config to 127.0.0.1:3000 and it is ok now.

[iqfareez]

Try starting the server on any IPv4: 0.0.0.0. Example for Node JS based applications:

npm run start -- --host 0.0.0.0

For yarn:

yarn start --host 0.0.0.0

For angular, see this answer. For vite, see this.

[jhaby]

I was having this issue and it was killing my day and this soultion did it. Thanks

[0420syj]

Worked for me as well, in yarn v3.5.0 ! Thanks 👍

[fe7ng654123]

Try starting the server on any IPv4: 0.0.0.0. Example for Node JS based applications:

npm run start -- --host 0.0.0.0

For yarn:

yarn start --host 0.0.0.0

For angular, see this answer. For vite, see this.

saved my day

[BentonKwok]

worked for me :)
npm run dev -- --host 0.0.0.0

[SkylerMime]

This didn't fix the problem for me for my Vite app :/

[cjohansson]

Running killall node killed the terminal and the entire codespace for our team, not recommended

[LeoDog896]

In general, if you're having this problem, host at 0.0.0.0. Codespaces has trouble detecting localhost servers, unlike gitpod.

[Ni-011]

hey, i am working on a project that uses yarn dx to run a few scripts, it hosts it on 3000, how do i change it to 0.0.0.0 ?

[eergeek]

is this resolved? im running aurelia app in codespace and getting this error
tried above workarounds, didn't help

[stevenlevey]

I have the exact same issue when trying to stand up a default sveltekit application. I've tried all the above suggestions and I get a 502 Gateway error every single time.

[LeoDog896]

Odd, trying --host on my dev server usually worked for me.

[steven-levey-sp]

Ok I have an update. (Revisited Codespaces after moving to Codesandbox for a while)

If you run npm run dev --host 0.0.0.0 --port 8080 that seems to fix it for me. So the key part was to add the --port 8080 as without that it just couldn't find it.

[SkylerMime]

This solution worked for me! Apparently Codespaces was having trouble with the default Vite port (5173), but 8080 works fine.

[Miki-Leo]

Hi, i have the same issue now... was someone able to fix it afterall?

[dkotama]

with angular , running ng serve --host 0.0.0.0 fix the problem for me

[azeek21]

For anyone using yarn and having same problem. running yarn start gave me same bad gateway error.

Fix: yarn ... --host 0.0.0.0 worked for me. NOTE: replace dots with the command you want. e.g: dev, start ...

[akshay-verma]

For anyone using vite, use —host 0.0.0.0 explicitly in your commands.
Example -

vite --port 5173 --host 0.0.0.0
vite preview --port 5555 --host 0.0.0.0

[mrhoodz]

why would someone pay for github code spaces if it cant do some a simple as showing you what you are making ??

[loghomefinishing]

"dev": "vite dev --host",
be sure to add the --host and it will work in package.json

[vskbot007]

it works . Thanks !!

[ValterJunior]

It worked like a charm on React + Vite!

[suggoooiii]

If you're using Vite you can change the following in your package.json
"scripts": { "dev": "vite --host 0.0.0.0", "build": "vite build", "preview": "vite preview" },

now you can run the following from your terminal npm run dev

[torodebout]

add server.host = true block in vite.config.js, will solve the issue , like this :
export default defineConfig({ plugins: [react()], server: { host: true, } })

[kioley]

Try changing both the host and the port, as it may not work on all ports
example for VITE:
yarn vite --host 0.0.0.0 --port 3000

[luke1212]

I am trying to develop a web application based on Angular in Codespace. When I did "npm run start", I got the local host URL in the terminal. After clicking on it I got a blank loading page which supposes to be the initial start page of angular if I run this same command locally.

[ianwesterfield]

Try ‘ng serve —host=0.0.0.0’?

[luke1212]

Hi, ianwesterfield,

Thank you for your reply! I found a similar solution
I find this on another closed issue and it works!
microsoft/vscode#173432 (comment)

[ianwesterfield]

Cool beans - good luck!

[deepaksankar]

I just got this same error while using npm run dev for a simple react app I am creating

[thehackermonkey]

My vite project worked after changing the port from 5173 to 3000. My advice is to try port 3000

package.json

"scripts": {
    "dev": "vite dev --port 3000 --host",
...
}

[takumikuroyanagi]

Killing the running processes worked for my React Project.
Simply by restarting the codespaces.

Stopping and starting a codespace - GitHub Docs

killall node is not recommended.

Running killall node killed the terminal and the entire codespace for our team, not recommended

[natecalc]

Hi all.

I kept running into this 502 bad gateway error when i was in my main codespace, then i created a new branch. When i created the new branch the 502 bad gateway issue began happening.

The solve for this is to just stop the codespace, but restart it while you are on your newly created branch. Hope this helps.

[ghost]

In my case i get 502 bad gateway
at this URL https://codespaceid-5173.preview.app.github.dev/
but the app is working fine here https://codespaceid-5173.app.github.dev/

[howardwu1]

I also saw this issue with spring boot and port forwarding -- and this was also intermittent, especially when first creating the codespace (and even after multiple restarts from then).

[tsolutionsx]

A 502 Bad Gateway error typically occurs when a server acting as a gateway or proxy receives an invalid response from an inbound server. In your case, it seems like the issue is between your React app running on port 3000 and your Express API running on port 5000.

In client side, you can add proxy in package.json: "proxy": "http://localhost:5000"

And maybe you need to check nginx setting for them.

server {
    listen 80;

    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /api/ {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}