Failed to execute 'postMessage' on 'DOMWindow'

sbogdanova
New Member
2 0 0

Hello, everyone!

I'm trying to fix this issue from a couple days and I'm still not manage it. 

My app was rejected, because Shopify App Bridge doesn't work properly. When I install the app, the browser redirects to the original url of the app (not shopify admin).
The error, which appears in console is:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://shopvote-test.myshopify.com') does not match the recipient window's origin ('https://middleware.shopvote.de').

 
In my app, I'm using the following script:

<script src="https://unpkg.com/@shopify/app-bridge@2"></script>
<script>
let host = btoa('{{ Auth::user()->name }}');
var AppBridge = window['app-bridge'];
var createApp = AppBridge.default;
var app = createApp({
apiKey: '{{ config('shopify-app.api_key') }}',
host: host,
forceRedirect: false, 
});
</script>


As you see I use version 2 of app-bridge, so I encode host with Base64. With version 1 I used shopOrigin property without encoding and the result was the same.
If I change forceRedirec to true, it redirects me to page, which is not founded - https://shopvote-test.myshopify.com/apps/8e54a3332a950a059679711784aa9227/login.
On version 1, it redirects me to the shopify admin page, but in the iframe I have '500 Server error'.

When I open the app from Apps in admin dashboard, everything works fine. The issue is only on installing.

I hope someone will help! Thank you!


0 Likes