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

[Eltrino]

We are implementing a Checkout UI extension in our existing app, and we need to communicate with our backend. For this communication, we use App Proxy. In general, App Proxy is configured correctly and is working because we use the same request on the order thank you page. At this moment, we want to move this functionality inside a checkout flow.

Here is our extension configuration:

[capabilities]
network_access = true
block_progress = true
api_access = true

And here is an example code in the extension:

import React, { useState, useEffect } from 'react'
import {
  render,
  BlockStack,
  useShippingAddress,
  useExtensionApi,
  Banner,
  Select,
} from '@shopify/checkout-ui-extensions-react'

render('Checkout::ShippingMethods::RenderAfter', () => 

This is a proof of concept, and we are trying it on a development store. The error we encounter is:

"Access to fetch at '[https://store.myshopify.com/apps/np/warehouses-list](https://store.myshopify.com/apps/np/warehouses-list)' from origin '[https://cdn.shopify.com](https://cdn.shopify.com/)' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

If we rewrite this example to, for example, make a request to the Storefront API, everything works as expected.

[Eltrino]

Forgot to mention we have observed that adding “credentials: include” to the fetch call does not include credentials in the “OPTIONS” request. However, we have found that when making a similar request to the Storefront API have all cookies in the request.

[Happiness]

I have the same issue. Will appreciate if anyone can share a solution here.

[ShopifyDevSup]

Hi @Eltrino ,

While we don’t currently provide direct support for Functions in this forum, the public [Shopify/function-examples GitHub repository] has an active [discussion board] that might be worth checking out.

Hope you have a great day

[jfeuchter_be]

Did you get a solution to this issue? Im having the same problem right now. You can bypass by adding a no-cors mode to the fetch but then the response becomes opaque and you cant get the answer haha. Any other solutions?

[agrohs]

Having the exact same issue/question…

[agrohs]

This is not a Shopify Function from what I can tell - this is a Checkout UI extension

[jfeuchter_be]

Im not sure how to solve this for POST calls but for GET calls I just made fetch call with no attributes sent through the fetch function and the call passed like normal. For now you could “fake” the POST into a GET call with the parameters through the url as long as there are no sensitive data you are sending could be a patch solution. Otherwise I would also be awaiting for the clean solution haha.

[jarthorn]

Network calls from Checkout UI Extensions do not require proxying through a Shopify endpoint. App Proxy is designed for apps integrating into storefront, rather than checkout. Your app backend will need to specify the Access-Control-Allow-Origin response header to allow the customer’s browser to make the network call. For more detailed guidance on network calls from Checkout UI Extensions, including setting access control headers, please see this help document.

[Eltrino]

its not about functions

[Eltrino]

Hi @jarthorn ,

Apologies for any confusion. As I understand it, the App Proxy feature is intended to help us developers conceal the actual URL of our apps, making it appear as if the requests are to the same domain as the shop. Additionally, using the App Proxy provides a kind of authentication before our apps because all requests will be signed.

However, are you suggesting that we need to make direct calls to our app servers via their actual URLs?

Also, I wanted to clarify whether it’s not the correct way to use the proxy if we add a similar dropdown to the thank you page (via script tags) and use the proxy url to fetch data there as well. Could you please confirm?

[jarthorn]

However, are you suggesting that we need to make direct calls to our app servers via their actual URLs?

I mainly wanted to say that App Proxy is not required for Checkout UI Extensions. You can make direct calls to your own app servers from a Checkout UI Extension. However I’m not aware of a reason why App Proxy could not be used if you wanted to. I suggest start by ensuring you are setting the appropriate Access-Control-Allow-Origin header on responses from your app’s endpoint to ensure it can be used from within an extension. If the proxy doesn’t interfere with that you should see the header come through on the browser side of the request. If you find evience the proxy itself is stripping or altering that header we can investigate further.

[Eltrino]

what is required from us for further investigation? because we are setting correct cors headers and still it does not work.

[jarthorn]

We’ve explored this further and believe the problem is that UI extensions make an HTTP OPTIONS request, which is not supported by App Proxy. The resulting 405 response is interpreted by the browser as a CORS error. For now the solution is to make direct calls to your own app server without App Proxy as an intermediary. We will investigate fixing this but are still undecided on whether we want to support this combination of App Proxy and Checkout UI extensions.

[Eltrino]

Hi Jarthorn,

Thank you for the clarification and the update.

[Max_V]

This answer still doesn’t help.
I tried to make a request to our server without application proxy.

await fetch(url, { // url - is direct link to our server
        method: 'POST',
        body: JSON.stringify(formData),
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-type': 'application/json',
        },
    })
        .then(resp => {
            return resp.json();
        })
        .then(receivedJson => {
            console.log(receivedJson);
        });

In my server I added special headers

header('Access-Control-Allow-Origin: *');

But in console, I am getting this error: "…has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response."

In network, I see OPTIONS request which return code 200, then my main request which gets “CORS failed” code(.

If I add

mode: 'no-cors',

in fetch – this works, but I can’t read the response from my server, and in your documentation, I see

Required CORS headers

so this is one of the must-haves. I would appreciate any help on this issue. Since we need to send a POST request to our server and this request must be secure.

[jarthorn]

access-control-allow-origin is an HTTP response header, not a request header. Remove this header from your fetch request, but leave it in the server response.

[Max_V]

It does not help. I removed this headers from fetch.

await fetch(url, {
        method: 'POST',
        body: JSON.stringify(formData),
        headers: {
            'Content-type': 'application/json',
        },
    })
        .then(resp => {
            return resp.json();
        })
        .then(receivedJson => {
            console.log(receivedJson);
        });

And in my PHP server

header('Access-Control-Allow-Origin: *');//To be sure, but I also pass the header in the response itself below.
Route::post('/test-extension', function (){
    return response()->json(['status'=>'success'])->withHeaders([
             "Access-Control-Allow-Origin"=> "*",
         ]);
});

But I still get error “CORS error”.

[Max_V]

The problem was in the level settings above. I added this.

$response->headers->set('Access-Control-Allow-Origin' , '*');
$response->headers->set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT, DELETE');
$response->headers->set('Access-Control-Allow-Headers', 'Content-Type, Accept, Authorization, X-Requested-With, Application','ip');

at the beginning of all responses from our server—and it worked for me. Thank you

[rajankumartpss]

Hello, I hope you are doing well.

I am also facing similar kind of problem in my checkout extention where we want to use api of own backend (custom shopify) app. When we are using the fetch method in extention its showing cors error. But api is working good in postman.

Error :

Fetch Method Code :

Postman Response :

As shopify updated its doc in remix freamwork recently so I am not able to find like how to enable cors at my backend.

Little help would be greatly appreciated.

Thanks