Why does this http request time out?

Question

I am sending a GET request inside an OpenShift pod to a backend application. In the console of the openshift pod I can run the following command succesfully:

wget -qO- --no-check-certificate \
--header 'Accept: */*' \
--header 'Authorization: Basic <base64 encoded auth>' \
https://my-url.nl:8221/path/to/my/resource/organisations

I can also call the API endpoint from postman without issue (from a different server).

However, when I run the following fetch I get a timeout.

process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0';

const credentials = Buffer.from(
  `USERNAME:PASSWORD`
).toString('base64');

fetch(
  'https://my-url.nl:8221/path/to/my/resource/organisations',
  {
    method: 'GET',
    headers: {
      Authorization: `Basic ${credentials}`,
      Accept: '*/*',
    },
  }
).then((data) => {
  console.log(data.json());
}).catch((reason) => {
  console.log(reason);
});

I get the following error after a long wait

GET https://my-url.nl:8221/path/to/my/resource/organisations net::ERR_CONNECTION_TIMED_OUT
Uncaught (in promise) TypeError: Failed to fetch

Both the preflight and actual API call fail.

Am I forgetting something simple? Does this have to do with CORS? Or something with skipping the certificate validation? What kind of API call would return a timeout rather than a failed (400/500) response.

is the code executed at https://my-url.nl:8221/path/to/my/resource/organisations something you've written? — Jaromanda X
– Jaromanda X, Commented Jul 22, 2022 at 10:06
Have you by any chance sent invalid request's / credentials to the URL, if so you might be temporally banned, some systems will not even respond to requests when in this state, as it can help mitigate DOS attacks. But saying this, if you can do Postman from the same machine that won't be it. — Keith
– Keith, Commented Jul 22, 2022 at 10:10
It could also be an issue with fetch in nodejs, are you using the experimental fetch, or is fetch some library you added to nodejs? it's clear you don't actually know how to use fetch, since console.log(data.json()); will always log out a Promise — Jaromanda X
– Jaromanda X, Commented Jul 22, 2022 at 10:11
@JaromandaX Looking at his console logs he has shown, this looks more like from the browser, rather than node. But looking at his code, it looks like Node, what's going on here OP, can you explain? — Keith
– Keith, Commented Jul 22, 2022 at 10:15
@Keith - good point ... the process.env.NODE_TLS_REJECT_UNAUTHORIZED looks nodejs ... Buffer.from looks nodejs ... I hadn't even looked at the pictures OP posted ... because pictures rarely help :p and yet pre-flight indicates browser — Jaromanda X
– Jaromanda X, Commented Jul 22, 2022 at 10:19

stefano · Accepted Answer · 2022-07-22 10:44:38Z

1

It's simply not going to work if you're doing it from the browser, as seen in the photos.

process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0';

These two lines do nothing in the browser. They only work in a NodeJS environment.

The only way to make it work is to change the backend endpoint, to a valid SSL cert (not self-signed). The easiest way to do that is probably cloudflare.

EDIT: I suspect you're compiling this from Node via react, vue, etc. In that case, it absolutely won't work because process.env is setting a system environment variable. Browsers don't have environment variables, so this isn't going to work, those 2 lines will do nothing.

edited Jul 22, 2022 at 10:44

answered Jul 22, 2022 at 10:12

stefano

735 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jaromanda X Over a year ago

yet, that code runs, as the fetch is initiated ... curious

Bas de Weerd · Accepted Answer · 2022-07-22 10:58:06Z

Thank you for the comments & answers to my post. It made me question how I was calling the endpoint. I am working with NextJs (React framework). This allows you to perform API calls, either client side or server side. I was performing these calls client side rather than server side (which won't work). The solution is to use the NextJs GetServerSideProps function.

My full working solution for anyone interested:

import { PageLayoutWithSideMenu } from '@pcss-cargonaut/ui-lib';
import NextLink from 'next/link';
import { GetServerSideProps } from 'next';

type Organisation = {
  accountNumber: number;
  accountSequenceNumber: number;
  name: string;
  role: string;
};
type Organisations = Organisation[];

export const getServerSideProps: GetServerSideProps = async () => {
  process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
  process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0';

  const credentials = Buffer.from(
    `USERNAME:PASSWORD`
  ).toString('base64');

  const res = await fetch(
    'https://my-url.nl:8221/path/to/my/resource/organisations',
    {
      method: 'GET',
      headers: {
        Authorization: `Basic ${credentials}`,
        Accept: '*/*',
      },
    }
  );

  const organisations: Organisations = await res.json();

  return { props: { organisations } };
};

const Organizations = ({ organisations }: { organisations: Organisations }) => {
  console.log(organisations);

  return (
    <PageLayoutWithSideMenu>
      ...
    </PageLayoutWithSideMenu>
  );
};

export default Organizations;

Wolfetto · Accepted Answer · 2022-07-22 10:33:52Z

0

Fetch returns a promise that resolves with a Response object and the response.json() returns, in turn, another promise that resolves with the result of parsing the response body text as JSON.

So, you have to add another .then() after the first one.

A general example below:

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

edited Jul 22, 2022 at 10:33

answered Jul 22, 2022 at 10:26

Wolfetto

1,20010 silver badges21 bronze badges

Collectives™ on Stack Overflow

Why does this http request time out?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related