Checkout UI Extensions App Proxy and CORS Issue

Extensions
1

Hello I am using a Checkout UI Extension to verify some information to be displayed via a remote server. I just cannot seem to get a proxy URL to work with a Checkout UI Extension.

I keep getting this error when using my app proxy:

Access to fetch at 'https://mydomain.myshopify.com/apps/check_war/' from origin 'https://extensions.shopifycdn.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Checkout.jsx

 const proxyUrl = storeUrl+'/apps/check_war/';
		console.log('Proxy URL:', proxyUrl);
        const warrantyResponse = await fetch(proxyUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            id: cartLine.merchandise.product.id, 
          }),
        });

shopify.app.toml

[app_proxy]
prefix = "apps"
subpath = "check_war"
url = "https://my-remote-server/warranty/dev/send_check.php"
content_type = "application/json"

send_check.php (on remote server)

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, OPTIONS, GET');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
header('Content-Type: application/json');

// Handle preflight OPTIONS request
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit;
}

Now this DOES work when I use my full url https://my-remote-server/warranty/dev/send_check.php but clearly I do not want my reomote server domain to be exposed, especially in checkout..hence the proxy.

Wondering if it is because I have to use a absolute URL instead of a relative like I do in other non-checkout UI apps? When using a relative URL it doesn’t know.

1 Like
3

Hey @Stats_Marketing - thanks for your patience on this, I’ve been digging into this for a little bit on my end and I believe that your redirection should work with your configuration.

One thing that a colleague mentioned as I was looking into this would be the possibility that the error may appear if your shop is password protected on the frontend. Could you let me know if that’s the case and if disabling password protection allows the proxy request to be properly passed over?

If not, if you’re able to share your shop ID/myshopify.com URL and your extension’s app ID, I’m definitely happy to take a closer look into this with you.