CORS Issue in Checkout UI Extension with App Proxy | Remix JS

Extensions
6

Yes it is really frustrating when there is not enough documentation regarding CORS. Since I built this app custom app for one of my merchants, hence i solved this issue by simply changing assigning proxy url, but i would not recommend it if you are working in production level. Since i hosted this app in fly.io, below is the example how i fixed this cors issue as per below checkout extension. Hope this might help.

  const useApiUrl =
    "https://{flyio-urlname}.fly.dev";

  useEffect(() => {
    const fetchToggleStatus = async () => {
      try {
        const apiUrl = useApiUrl + `/app/proxy`;

        console.log("Fetching data from:", apiUrl);
        const response = await fetch(apiUrl, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
          },
        });

        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const data = await response.json();
        console.log("Fetched data:", data);
...
...
}, [])