Why does Cloudflare "break" my FE->BE connectivity?

[1Dylan123]

Problem/Explanation

I am currently building a webapp on DigitalOcean where I have the front/backend separated into their respective docker containers as such:

• Frontend: ReactJS, mapping 80:3000 (going to 80 on server from container’s port of 3000)
• Backend: ExpressJS/NodeJS mapping 3001:3001 (mapping 3001 on server from container port of 3001)

I am currently only using HTTP, and everything so far is working as intended, the frontend successfully calls to the backend.

However, whenever I turn on Cloudflare (even when I completely turn off SSL features so its still HTTP) my backend suddenly doesn’t receive any requests from the frontend, and even doing curl mywebsite.com:3001/exampleapiRoute doesnt yield anything, but I know that my backend is still working, as doing curl localhost:3001/exampleapiRoute does return something(and did work previously when Cloudflare was off).

Why is Cloudflare breaking my application? I haven’t seen any errors,warnings,etc that indicate that something is going wrong.

Code snippets

My frontend calls like this:

const url = 'http://mywebsite.com:3001/exampleapiRoute';
 await Axios.post(url, {
      eventId:    params.eventId,
      userToken:  props.user.token
}).then((response) => {
 etc

and my backend follows this:

const express = require("express");
const webserver = express();
const cors = require("cors");
const mysql = require("mysql");

const PORT = 3001;

// db connection here

webserver.use(cors());
webserver.use(express.json());

webserver.post("/exampleapiRoute", (req,res) => {
   res.send({
     response:"Hello world"
   )}
});

webserver.listen(PORT, () => {
  console.log(`[Express] Server running on ${PORT}`);
});

At this point I am all out of ideas, so any information would be much appreciated. I tried posting for help on SO, but got no help, and figured this was a more appropriate place to discuss this anyways.

[Chaika]

Cloudflare only supports a few specific ports, you can find the list here:

Network ports · Cloudflare Fundamentals docs

Specifically for HTTP:
80
8080
8880
2052
2082
2086
2095

You can use Origin Rules, Destination Port Override to override the port Cloudflare connects to your origin with:

Create an Origin Rule in the dashboard · Cloudflare Rules docs

You could do something like setting up a subdomain, api.mywebsite.com, set up an origin rule
Hostname equals api.mywebsite.com
Destination Port override, Rewrite to 3001
Then you would connect to api.mywebsite.com normally on port 80.

You could also use Cloudflare Tunnels, which require you to install and run a service on your web server/origin, and create a secure outbound connection to Cloudflare’s edge. In that case, you could set up a subdomain like api.mywebsite.com pointing to the service http://127.0.0.1:3001

With either of those setups, you would be sending traffic to Cloudflare on port 80/443 as normal, but behind the scenes it would route it to your backend on its own port. There is no way for Cloudflare to accept traffic on 3001, other then just gray-clouding it / DNS-only, which of course doesn’t go through Cloudflare’s proxy at all.

[1Dylan123]

This was the solution I was looking for, thank you so much!