CORS issue with Checkout UI Extension + Fetch API + App Proxy

Retired Boards Appdev Extensions
21

This error indicates that your app server’s response is missing the “Access-Control-Allow-Origin” header. Please add this header as described in the documentation.

22

Thanks, I am also having an issue with this. My Remix headers from Postman are as follows:

tables25_0-1692723650324.png
tables25_0-1692723650324.png2362×906 140 KB

But when I send a POST request to the same url through a subscription extension, Shopify gives a CORS error in the browser even though the backend registers a 200 response and everything with the endpoint works fine. This makes it so that I can’t see the body of the POST response and can’t debug or provide good error messages to the client if I want to send some error from the backend. How should I resolve this?

23

Nevermind, this has been resolved. Apparently I needed to remove the “allowed headers” from the backend response, or this error would show:

“Access to fetch at ‘url’ from origin ‘https://cdn.shopify.com’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘*, https://cdn.shopify.com’, but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.”

24

Hi @jarthorn ,

Thanks for clarifying this. I was stuck until I read your response.

Is there a way to get the App URL dynamically from within the App itself? Otherwise I have to manually update the URL each time I run it in a dev environment. Looks like a few others have the same question:

https://community.shopify.com/topic/2100727

25

Anyone found the solution?

26

Hi, a query from a UI extension via an app proxy url has two main stumbling blocks:

I have just written a small UI extension with which I determine the order number and payment method for tracking on the Thankyou page.

Here is the working code.

import { useEffect } from "react";
import {
  reactExtension,
  useApi,
  useCheckoutToken,
  useShop
} from '@shopify/ui-extensions-react/checkout';

export const thankyouRender = reactExtension(
  'purchase.thank-you.footer.render-after',
  () =>
27

Hi. I’m facing the same issue: is this still like that or do you eventually started support a combination of App Proxy and Checkout ui?

28

I am having the same issue with my checkou ui extension, I am accessing the app server url directly and I can send get requests without issues buit when I try to post it gives me cors errors. But I have installed the same app on a test store and it works perfectly; not sure what is going on.

29

I found a solution for when the checkout extension is sending information to the api, I authenticate it and send the cors like this:
const { cors, sessionToken } = await authenticate.public.checkout(request)
return cors(json({ message: “success” }))

30

@jarthorn do you have any updates?

31

Follow up note: This problem related to HTTP OPTIONS requests was fixed on July 13, 2023. While we still do not recommend using an app proxy with Checkout UI Extensions, we have verified they do work, with some exceptions that are documented here (see app proxy section).