API Url not reachable by Next.js / fetch container

[Stefan39]

Summary

In one project, I have a resource with a PHP/Symfony API with its own subdomain, and now I wanted to set up another resource with a Next.js frontend using Dockerfile. In the Next.js project, I use fetch to retrieve some JSON data from the API. The API URLs are all accessible without any problems, and CORS is also set up correctly.

The deployment works so far, but the API URL that is passed to the container via the environment apparently does not call the API but something else, and I get a 403 error with an HTML document that contains almost exclusively JavaScript.

Dockerfile of next.js you will found here: https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile I have change to use node:24-alpine

the page.js:

export default async function Home() {
  let statusText;
  const url = process.env.API_URL + '/status';
  console.log(url);
  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
    }
  });
  console.log("Response-Headers: " + JSON.stringify(response.headers));
  console.log("Response:-URL: " + response.url);
  let status = undefined;
  if (!response.ok) {
    console.log("Status: " + response.status);
    console.log('Text: ' + JSON.stringify(response));
  } else {
    status = await response.json();
  }

  if (status) {
    if (status?.available) {
      statusText = <span className="text-green-600 dark:text-green-400">{status?.text}</span>;
    } else {
      statusText = <span className="text-red-700 dark:text-red-300">{status?.text}</span>
    }
  }

  return <section className="container mx-auto py-10 p-4">
    <div className="flex flex-wrap">
      <div>
          <strong>Status</strong>: {statusText}
      </div>
    </div>
  </section>;
}

The log tab wrotes:

2025-11-18T20:23:41.312378699Z https://api.example.de/status
2025-11-18T20:23:41.368359604Z Response-Headers: {}
2025-11-18T20:23:41.368442285Z Response-URL: https://api.example.de/status
2025-11-18T20:23:41.368469365Z Status: 403
2025-11-18T20:23:41.368574086Z Text: {"url":"https://api.example.de/status"}

If I'm going to terminal and login to the bash of the container:

/app $ wget https://api.example.de/status
Connecting to api.example.de (xxx.xxx.xx.x:443)
wget: can't open 'status': Permission denied
/app $ 

I had previously tried Nixpack, but the deployment kept failing with error messages, and it also appears that the maximum node version is 22 (I need at least 24).

Does anyone have any idea what I am doing wrong here? Do I need to configure anything else for traefik here?

Additional information

No response

Example

No response

[icyJoseph]

I wonder if you can start a Node REPL from the container, and see what a fetch to your resource does.

As said before, it looks like there's some kind of bot protection going on, the page you are getting is trying to download one of those wait a moment, verifying you are a human challenges.

Not sure the wget error is related, I think it can fail if you don't have write permissions to the current folder?

[Stefan39]

Oh.. you're right. I think cloudflare block it. I try to fix it.

[Stefan39]

Yes, you're right. The problem was the Bot-Fight setting in Cloudflare. I'm not on Paid plan yet, so i cannot add a rule for that and must set it off. This was the trick.

Thank you very much.