I have face some issuse appBridge Releted

[Rohit_saini]

Problem Summary: INVALID_ORIGIN Error in Shopify Embedded App

Context:

I’m building a Shopify embedded app with:

• React frontend hosted on: https://test-consultationapp.zend-apps.com

• Express backend hosted on: https://test-online-consultation-saini.zend-apps.com

• Using proxy (/shopify-api) in React to forward requests to backend

• App installation and OAuth happens via backend

• After auth completion, backend redirects to frontend with Shopify params

Current Flow:

1. Installation → Backend OAuth (zend-apps.com)

2. Auth completion → Redirect to frontend (ngrok-free.dev) with params

3. Shopify App Bridge initializes on frontend

4. ERROR: APP::ERROR::INVALID_ORIGIN

5. Result: Side menu not injecting

Root Cause:

Shopify App Bridge’s same-origin policy is failing because:

• Authentication domain: zend-apps.com (backend)

• App domain: ngrok-free.dev (frontend)

• Mismatch → App Bridge rejects with INVALID_ORIGIN

Error

1. action:

   1. group: “Error”

   2. payload:

      1. message: “Message origin ‘https://test-consultation-app.zend-apps.com’ does not match app origin ‘https://test-online-consultation.zend-apps.com’.”

      2. type: “APP::ERROR::INVALID_ORIGIN”

      3. [[Prototype]]: Object

   3. type: “APP::ERROR::INVALID_ORIGIN”

   4. [[Prototype]]: Object

2. message: “APP::ERROR::INVALID_ORIGIN”

3. name: “AppBridgeError”

4. type: “APP::ERROR::INVALID_ORIGIN”

5. stack: “AppBridgeError: APP::ERROR::INVALID_ORIGIN”

6. [[Prototype]]: Error

[Doug_P]

So… many… hostnames… standardize on ONE hostname and you will save yourself a lot of pain avoiding typo’s and other domain related naming differences/issues.

There’s likely a couple of issues here.

First, your redirect that you want to make needs to match one of the redirect _urls in your shopify.app.toml file.

Second, if your app is embedded (seems like it might be) then you are dealing with an iframe. The iframe needs to make requests to the same domain (i.e. consultation-app.zend-apps.com can only load pages from consultation-app.zend-apps.com and not consulation.app.zend-apps.com - notice the difference in naming?) so you may be having issues from the many different names.

[Rohit_saini]

I am saying that I am using two domains. I have hosted React on one domain and the backend Express on another. I set up a proxy for the backend, and after installing the app, whenever the auth callback completes, it redirects to the frontend domain. The reason for this error is that the AppBridge is set to the proxy domain on Shopify, so React loads there. But how can I open React on the backend domain? React needs a static server and Express needs a web server. Give me the best solution because I cannot whitelist both domains.

[Doug_P]

In your case, make sure you narrow the problem down to where it fails and that will help you understand where the problem is. Setup a test case where your back end is on the same domain as your front end - does it work?

My guess is that you are using the appBridge to fetch() from the second domain and your shopify toml file does not contain that domain (I don’t think it can though). Shopify AppBridge is likely saying, “I cannot fetch data from the second domain because it does not match what your application_url is set to”. And your first server (the frontend) is likely set to the application_url in the toml file.

When you want data from your backend domain then you’ll likely have to validate the request from the frontend to make sure the request is coming from a known and safe location. But also, don’t use AppBridge to make a request from your frontend to your backend. Use AppBridge to connect to Shopify only (i.e. for shopify data).

[Rohit_saini]

Please see this screen shot you will understand what i want to do