CORS error when calling App Proxy from Shopify customer account UI extension

Shopify Apps

Topic summary

A developer is encountering a CORS error when calling a Shopify App Proxy endpoint from a Customer Account UI Extension.

What Works:

  • Direct browser access to https://my-socks-store.myshopify.com/apps/proxytest returns the expected JSON response
  • The proxy route is configured with CORS headers including Access-Control-Allow-Origin for https://extensions.shopifycdn.com

The Problem:

  • Fetching from the extension triggers a CORS preflight error: “Redirect is not allowed for a preflight request”
  • Using a partial URL (/apps/proxytest) fails with a URL parsing error
  • The backend handles OPTIONS requests and returns appropriate CORS headers (including Access-Control-Allow-Methods, Access-Control-Allow-Headers, and 24-hour cache)

Current Status:

  • The issue remains unresolved
  • At least one other developer is experiencing the same problem
  • The root cause appears related to how Shopify’s extension environment handles cross-origin requests to app proxy endpoints, possibly involving redirects during the preflight process
Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I’m building a Shopify app that uses a Customer Account UI Extension (customer-account.order.action.render) and fetches data from a backend App Proxy route (/apps/proxytest).

Expected Behavior

When I open this proxy URL directly in the browser:

https://my-socks-store.myshopify.com/apps/proxytest

I get the expected JSON response:

{ "message": "Proxy GET successful!" }

Actual Problem in Extension

When I try calling this endpoint inside my extension using the full URL (In Shopify), I get a CORS error in the browser console:

Access to fetch at 'https://my-socks-store.myshopify.com/apps/proxytest' 
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

C:\new-app\extensions\ui-extension\src\Modal.tsx

import {
  reactExtension,
  Modal,
  CustomerAccountAction,
  Text,
  Button,
  BlockStack,
  useApi,
} from '@shopify/ui-extensions-react/customer-account';
import { useState, useEffect } from 'react';

reactExtension('customer-account.order.action.render', () => 

C:\new-app\app\routes\app.proxy.tsx

```javascript
import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { authenticate } from "app/shopify.server";

export async function loader({ request }: LoaderFunctionArgs) {
  // Handle CORS preflight request first
  if (request.method === "OPTIONS") {
    return new Response(null, {
      status: 204, // No Content is standard for preflight
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Credentials": "true",
        "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type, Authorization, Accept",
        "Access-Control-Max-Age": "86400", // Cache preflight for 24 hours
      },
    });
  }

  // Authenticate only for non-OPTIONS requests
  const { session } = await authenticate.public.appProxy(request);
  if (!session) {
    return json(
      { error: "No session" },
      {
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Credentials": "true",
        },
      }
    );
  }

  // Return response for GET requests
  return json(
    { message: "Proxy GET successfull!" },
    {
      headers: {
        "Access-Control-Allow-Origin": "https://extensions.shopifycdn.com",
        "Access-Control-Allow-Credentials": "true",
      },
    }
  );
}

when using partial url (/apps/proxytest) got this error

Exchange Item
Error: Failed to construct 'Request': Failed to parse URL from /apps/proxytest

Subpath prefix: apps
Subpath: proxytest
Proxy URL: https://cs-dakota-stock.trycloudflare.com/app/proxy

2

Did you get it to work? I’m facing the same issue

3

No, still on the same issue!!