Javascript Fetch - Custom header is causing error: net::ERR_HTTP2_PROTOCOL_ERROR

Question

Good day,

I need to access the API of a payment gateway from my website. It is built with React and Next JS.

While using the fetch method, I get an error: net::ERR_HTTP2_PROTOCOL_ERROR. A second error is displayed in the console: Uncaught (in promise) TypeError: Failed to fetch

I have narrowed it down it being a problem when I set a custom header. I need to set these in order to authenticate with the API.

I don't know a whole lot about this, but I assume that the browser is not even sending out a preflight request.

There are two headers currently. A simple 'Content-Type', and a non-simple custom 'merchant-id' header. The fetch executes fine if I remove the custom header, and I get a server response from the API. The request fails when I add in the custom header.

const request = new Request(
    `https://api.payfast.co.za/ping?testing=true`,
    {
      method: "GET", 
      headers: {
        "Content-Type": "text/plain",
        // "merchant-id": "xxxx",
      },
    }
  );

fetch(request).then((res) => res.json()).then((data) => console.log(data));

Any advice on where I should start looking?

I have tested this in an HTTP client and it works fine if I add the custom headers.

Thanks, Corrie

Answer 1

Hi try to Increase change configuration oh HTTP on your server -> such me i have changed " HTTP/2 Max Header List Size " parametres on my webserver " payara " in : Admin panel -> Configuration -> server-config ->Network Config -> Network Listeners -> http-listener-1 :8080 -> HTTP tab -> HTTP/2 Max Header List Size to 49152