Fetch in Checkout Extension

Retired Boards Appdev Extensions
1

I want to get the discount code present in my store in my checkout-extension so i am using fetch but its giving me cors error instead of giving true to network access.Also i enabled from the partners also.

useEffect(()=>{
fetch([https://tide-plus-store.myshopify.com/admin/api/2023-10/price_rules/discount_codes.json](https://tide-plus-store.myshopify.com/admin/api/2023-10/price_rules/discount_codes.json))
.then((cardDataRaw) => cardDataRaw.json())
.then((cardDataParsed) => {
console.log(cardDataParsed);

Error : Access to fetch at ‘https://tide-plus-store.myshopify.com/admin/api/2023-10/price_rules/discount_codes.json’ from origin ‘https://extensions.shopifycdn.com’ has been blocked by CORS policy: 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.

2

HI Rajatzade,

It looks like you’re trying to make an Admin API request from your extension? First, a warning for the dev. If so it seems like the API call you’re making requires an access token, which would be visible to anyone using the extension (see: Admin REST API Authentication) which is not very secure. Network requests from checkout extensions can only be made to servers that allow Access-Control-Allow-Origin: *. (see docs here)

You’re trying to make a request back to to the Admin REST API server and we don’t set that header, so you’ll be blocked in this case. Assuming you had a server you controlled to make the requests against, you’d be able to setup the server with the correct CORS policy and make requests.