This seems to be similar to "https://community.shopify.com/c/Shopify-APIs-SDKs/Accessing-Storefront-API-with-curl-and-GraphiQL-wo...
As explained in that related post, we have taken care of permissions as well. Still status is 403. Following is the fetch call:
let END_POINT_RAW="https://<shopname>.myshopify.com/api/2021-01/graphql.json"
function fetchBody_SHOP () {
return {
'method': 'POST',
'crossDomain': true,
'async': true,
'mode': 'no-cors',
'headers': {
'Content-Type': 'application/graphql',
'X-Shopify-Storefront-Access-Token': '<storefront_access_token>',
},
'body': 'query { shop { name } }'
};
}
function respCallback (res) {
if (!res.ok) {
console.log ("resp not ok");
} else {
console.log ("resp ok");
}
}
const result = fetch (END_POINT_RAW, fetchBody_SHOP ())
.then (res => respCallback (res))
.catch (err => errCallback (err));
Error msg (displayed in chrome-debugger-console):
https://<shopname>.myshopify.com/api/2021-01/graphql.json - 403
resp not ok
The 'res' object type is "opaque". So, don't know what further needs to be changed/adjusted/
Interesting to note, if we use the https url with API_KEY and API_PASSWORD, we do receive expected data.
"https://%s:%s@%s.myshopify.com/admin/api/%s/graphql.json" % (API_KEY, API_PASSWORD, SHOP_NAME, API_VERSION)
However using the "X-Shopify-Storefront-Access-Token" in fetch method, we get 403.
