App reviews, troubleshooting, and recommendations
Hey,
App is written on shopify-node-js-template.
I am having issues with CORS when trying to make redirect to Shopify Billing (API) page.
Access to fetch at 'https://[SHOPIFY_STORE].myshopify.com/admin/charges/[UID]/[UID]/RecurringApplicationCharge/confirm_recurring_application_charge?signature=[SIGNATURE]' (redirected from 'https://[APP_URL].herokuapp.com/api/select-plan') from origin 'https://[APP_URL].herokuapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Flow:
1) On frontend I have a simple form that makes a POST request to /api/select-plan.
const requestOptions = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' }, body: JSON.stringify({ selectedPlan: selected[0], }) }; const response = await fetch("/api/select-plan", requestOptions); var body = await response.json(); console.log(body); if(body.status == "success"){ console.log(body.message); } else { console.log(body.message); }
2) Backend code:
app.post('/api/select-plan', async (_req, res, next) => { const session = res.locals.shopify.session; const confirmationUrl = await shopify.api.billing.request({ session: res.locals.shopify.session, plan: _req.body.selectedPlan, isTest: true, }); res.redirect(confirmationUrl); next });
Does anyone have a clue how I could fix this?
Please try with blow codes.
API response:
const billingResponse = await shopify.api.billing.request({
session,
plan: plan_select,
trialDays: 7,
isTest: true,
returnObject: true,
});
res.status(200).send({success: true, confirmationUrl: billingResponse.confirmationUrl});
React code
import createApp from '@shopify/app-bridge';
import {Redirect} from '@shopify/app-bridge/actions';
.......
.......
const config = {
// The client ID provided for your application in the Partner Dashboard.
apiKey: "Your client ID",
// The host of the specific shop that's embedding your app. This value is provided by Shopify as a URL query parameter that's appended to your application URL when your app is loaded inside the Shopify admin.
host: new URLSearchParams(location.search).get("host"),
forceRedirect: true
};
const app = createApp(config);
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.REMOTE, {
url: data.confirmationUrl,
newContext: true,
});
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025