# Shopify Admin UI Extension - CORS Issue in Development (But Works in Production)

**URL:** <https://community.shopify.dev/t/shopify-admin-ui-extension-cors-issue-in-development-but-works-in-production/8287>\
**Category:** Extensions\
**Tags:** admin-ui-extensions\
**Created:** [February 13, 2025, 3:53pm UTC](https://community.shopify.dev/t/shopify-admin-ui-extension-cors-issue-in-development-but-works-in-production/8287 "2025-02-13T15:53:40Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Philippe\_Pasquin](https://sea1.discourse-cdn.com/shopifycommunity/user_avatar/community.shopify.dev/philippe_pasquin/32/3988_2.png) [@Philippe\_Pasquin](https://community.shopify.dev/u/Philippe_Pasquin)\
**Post date:** [February 13, 2025, 3:53pm UTC](https://community.shopify.dev/t/shopify-admin-ui-extension-cors-issue-in-development-but-works-in-production/8287/1 "2025-02-13T15:53:40Z")

</div>

Hey everyone,

We’ve been debugging this issue for the past two days and could really use some insights.

We’re building a **Shopify Admin UI Extension** (TypeScript/Remix) following this example:  
🔗 [Shopify Admin UI Extension Docs](https://shopify.dev/docs/apps/build/admin/actions-blocks/connect-admin-extensions?extension=react)

Our extension needs to communicate with our backend, but we **keep hitting a CORS error** in development, even when properly setting CORS headers as described in the docs:  
🔗 [Shopify CORS Docs](https://shopify.dev/docs/apps/build/admin/actions-blocks/connect-admin-extensions?extension=react)

### What We’ve Tried

- Setting `Access-Control-Allow-Origin: *` and other required CORS headers.
- Explicitly allowing `https://partners.shopify.dev` and `https://admin.shopify.com`.
- Checking our tunnel (using `trycloudflared`) to ensure requests are routed correctly.
- Running everything in **production** —and surprisingly, it works perfectly there.

### The Problem

While the extension works in production, **we cannot properly debug and test in development** due to the persistent CORS rejection from the **trycloudflared tunnel**.

Has anyone encountered this before?  
Is there a workaround to make CORS behave correctly during local development?

Would love to hear any best practices or solutions you’ve used! 🚀

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![Philippe\_Pasquin](https://sea1.discourse-cdn.com/shopifycommunity/user_avatar/community.shopify.dev/philippe_pasquin/32/3988_2.png) [@Philippe\_Pasquin](https://community.shopify.dev/u/Philippe_Pasquin)\
**Post date:** [February 13, 2025, 4:01pm UTC](https://community.shopify.dev/t/shopify-admin-ui-extension-cors-issue-in-development-but-works-in-production/8287/2 "2025-02-13T16:01:34Z")

</div>

Hey everyone,

Just wanted to follow up on this issue—huge thanks to @Tommy_Gaudreau from the Slack Community for pointing me in the right direction!

After days of debugging and trying different CORS headers with no success, **the fix turned out to be a simple tweak in `vite.config.ts`** :

### Solution: Enable CORS in Vite

Adding `cors: true` to the Vite server configuration resolved the issue:

ts

CopyEdit

```auto
export default defineConfig({
  server: {
    port: Number(process.env.PORT || 3000),
    hmr: hmrConfig,
    fs: {
      // See https://vitejs.dev/config/server-options.html#server-fs-allow for more information
      allow: ["app", "node_modules"],
    },
    cors: true, // ✅ This fixed the CORS issue in development
  },
});

```

### Recap of the Problem

For context, we were building a **Shopify Admin UI Extension** (TypeScript/Remix) and encountered persistent CORS errors **only in development** when trying to communicate with our backend via `trycloudflared`. Despite setting proper CORS headers, nothing seemed to work—until we explicitly enabled CORS in Vite’s server config.

### Lessons Learned

- Shopify’s local tunnel (`trycloudflared`) can behave differently from production.
- Even if backend headers are correct, **the local dev server may still block requests due to its own CORS settings**.
- If you’re using Vite for your frontend, **double-check your `vite.config.ts` server settings**.

Hope this helps someone avoid the time sink we went through! 🚀

* * *

---

<div class="post-metadata">

**Author:** ![Dylan](https://sea1.discourse-cdn.com/shopifycommunity/user_avatar/community.shopify.dev/dylan/32/90_2.png) [@Dylan](https://community.shopify.dev/u/Dylan)\
**Post date:** [February 13, 2025, 4:30pm UTC](https://community.shopify.dev/t/shopify-admin-ui-extension-cors-issue-in-development-but-works-in-production/8287/3 "2025-02-13T16:30:18Z")

</div>

Thanks for taking the time to reply back with the answer. CORS trips up so many developers and having the actual solution searchable in this community makes it so much easier to find the answer.

---

<div class="post-metadata">

**Author:** ![Manuel\_Pineda](https://avatars.discourse-cdn.com/v4/letter/m/e5b9ba/32.png) [@Manuel\_Pineda](https://community.shopify.dev/u/Manuel_Pineda)\
**Post date:** [February 14, 2025, 7:34pm UTC](https://community.shopify.dev/t/shopify-admin-ui-extension-cors-issue-in-development-but-works-in-production/8287/4 "2025-02-14T19:34:02Z")

</div>

Thank you so much!!! I have been struggling with this for days!!!

---

<div class="post-metadata">

**Author:** ![navdeep](https://sea1.discourse-cdn.com/shopifycommunity/user_avatar/community.shopify.dev/navdeep/32/285_2.png) [@navdeep](https://community.shopify.dev/u/navdeep)\
**Post date:** [February 15, 2025, 12:28pm UTC](https://community.shopify.dev/t/shopify-admin-ui-extension-cors-issue-in-development-but-works-in-production/8287/5 "2025-02-15T12:28:06Z")

</div>

> [@Philippe\_Pasquin](#):
>
> `cors: true`

cors = true  
partially worked for me.

using cloudflare tunnel (https ://contract-tim-exactly-illustration.trycloudflare.com/api/my-proxy) directly works for me instead of the app proxy

My client in this case is calling app\_proxy is customer account ext.

What headers are you using?

Edit:  
as per [shopify cust acc ext documentation](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-01/configuration#:~:text=UI%20extension%20requests%20made%20to%20the%20App%20Proxy%20of%20password%20protected%20shops%20is%20not%20supported.)  
“UI extension requests made to the App Proxy of password protected shops is not supported. Extension requests come from a web worker which does not share the same session as the parent window.”

so how do we work with dev stores that are password protected?

---

<div class="post-metadata">

**Author:** ![Tommy\_Gaudreau](https://sea1.discourse-cdn.com/shopifycommunity/user_avatar/community.shopify.dev/tommy_gaudreau/32/4320_2.png) [@Tommy\_Gaudreau](https://community.shopify.dev/u/Tommy_Gaudreau)\
**Post date:** [February 23, 2025, 6:39pm UTC](https://community.shopify.dev/t/shopify-admin-ui-extension-cors-issue-in-development-but-works-in-production/8287/6 "2025-02-23T18:39:51Z")

</div>

For context, after noticing that downgrading vite fixed the issue, I opened a ticket on the vite GitHub and the answer I got was that it was an expected breaking change to improve security (even though it’s in a patch update). I was pointed at the doc describing the change and options to correct the issue, which included adding the cors option in the config.

So if you’re running an older project and you suddenly get cors errors that you didn’t get before, this is probably why. That was my case and it was so confusing to figure it out 🤯

---

<div class="post-metadata">

**Author:** ![alimz](https://avatars.discourse-cdn.com/v4/letter/a/9de0a6/32.png) [@alimz](https://community.shopify.dev/u/alimz)\
**Post date:** [April 3, 2025, 5:43pm UTC](https://community.shopify.dev/t/shopify-admin-ui-extension-cors-issue-in-development-but-works-in-production/8287/7 "2025-04-03T17:43:05Z")

</div>

Thanks. This solution worked for me. Also, for the reference, here is my config:

```auto
export default defineConfig({
  server: {
    port: Number(process.env.PORT || 3000),
    hmr: hmrConfig,
    fs: {
      // See https://vitejs.dev/config/server-options.html#server-fs-allow for more information
      allow: ["app", "node_modules"],
    },
    cors: {
      origin: true, // Allow all origins
      methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
      allowedHeaders: ['Content-Type', 'X-Requested-With', 'X-Shopify-Shop-Domain'],
      credentials: true,
      maxAge: 86400 // 24 hours
  },
});

```

---

<div class="post-metadata">

**Author:** ![AbdelMark](https://avatars.discourse-cdn.com/v4/letter/a/eb9ed0/32.png) [@AbdelMark](https://community.shopify.dev/u/AbdelMark)\
**Post date:** [July 31, 2025, 11:06am UTC](https://community.shopify.dev/t/shopify-admin-ui-extension-cors-issue-in-development-but-works-in-production/8287/8 "2025-07-31T11:06:52Z")

</div>

be aware that this solution is correct for the development server only, since the vite config file server config has no effect after building the app for production.

---

<div class="post-metadata">

**Author:** ![Izaac\_Barratt](https://sea1.discourse-cdn.com/shopifycommunity/user_avatar/community.shopify.dev/izaac_barratt/32/10228_2.png) [@Izaac\_Barratt](https://community.shopify.dev/u/Izaac_Barratt)\
**Post date:** [September 12, 2025, 11:54am UTC](https://community.shopify.dev/t/shopify-admin-ui-extension-cors-issue-in-development-but-works-in-production/8287/9 "2025-09-12T11:54:22Z")

</div>

Created an account just to say thanks. Lifesaver - was having this issue for 2-3 days to no avail. Thanks guys