CORS issue while redirecting to Subscription approval screen

[altruist2692]

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/<charge id>/RecurringApplicationCharge/confirm_recu...<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>/<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.

[SivaKB]

@altruist2692  I am also facing the same issue, are you able to fix this issue ? Can you share work around how you fix this?