AppBridge fetch wrapper clears the custom headers while making a request using the Request object

[abhinavkumar940]

Describe the bug

AppBridge fetch wrapper clears the custom headers while making a request using the Request object. Works fine when using a plain URL. This breaks all the POST and PUT requests as the Content-type header is reset.

To Reproduce

Steps to reproduce the behaviour:

1. Setup AppBridge using CDN
2. Make a fetch request to the api like this:

   const request = new Request("/api/stuff", {
     method: "POST",
     body: JSON.stringify({
       foo: "bar"
     }),
     headers: {
       "x-set": "x-set-value",
       "x-append": "x-append-value"
     }
   });
   fetch(request);

3. Watch the request going on the network tab and the additional headers are wiped.

If applicable, add screenshots to help explain your problem.

Expected behaviour

The custom headers should also be passed to the api endpoint.

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

• @shopify/app-bridge-react @ 4.1.2

Platform

• OS: MacOS
• OS Version: 14.4.1
• App: Chrome

Additional context

A minimal reproduction will look something like this:

import { Button } from "@shopify/polaris";
import { useCallback } from "react";

export default function IndexPage() {
// This doesn't work, resets the headers
  const fetchUsingRequest = useCallback(() => {
    const request = new Request("/api/stuffs", {
      method: "POST",
      body: JSON.stringify({
        foo: "bar",
      }),
      headers: {
        "x-set": "x-set-value",
        "x-append": "x-append-value",
      },
    });
    fetch(request);
  }, []);

  // This works and preserves the headers.
  const fetchUsingUrl = useCallback(() => {
    fetch("/api/stuffs", {
      method: "POST",
      body: JSON.stringify({
        foo: "bar",
      }),
      headers: {
        "x-set": "x-set-value",
        "x-append": "x-append-value",
      },
    });
  }, []);
  return (
    <div className="flex h-64 gap-4 items-center justify-center">
      <Button size="large" onClick={fetchUsingUrl}>
        Fetch using URL
      </Button>
      <Button size="large" onClick={fetchUsingRequest}>
        Fetch using a Request object
      </Button>
    </div>
  );
}

[henrytao-me]

The fix is on production. 🙇