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///RecurringApplicationCharge/confirm_recurring_application_charge?signature= 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_recurring_application_charge?signature=. (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_recurring_application_charge?signature=. (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.