I am building an embedded Shopify application and working on Subscription flow to implement.
As part of this flow, after selection of plan, user will be redirected to a Approval screen, where user can add payment method and approve the subscription. It is hosted and managed by Shopify itself.
As an embedded application, I have to add that page to load inside my Iframe to give user a consistent behaviour. But somehow I am getting CORS error and not able to load that approval page inside shopify admin dashboard iframe.
Here I have attached the log for the error which I saw in browser console.
I am not able to load this URL https://store-count1.myshopify.com/admin/charges/chargeid/some-id/RecurringApplicationCharge/con... in to my embedded screen.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://store-count1.myshopify.com/admin/charges//RecurringApplicationCharge/confirm_recu.... (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://store-count1.myshopify.com/admin/charges/<charge_id>//RecurringApplicationCharge/confirm.... (Reason: CORS request did not succeed). Status code: (null)
I am using Ruby on Rails and shopify_app gem for building my embedded app. I am also using Turbolinks. Content Security Policy headers are set as per their docs and rack-cors is also added. but nothing works as expected.