Attempting to retrieve products from Shopify using the Admin API (GraphQL) through my frontend. I utilized the following code:
*I implemented "axios" on Quasar Framework, utilizing Headless Commerce
const response = await this.$axios({
url: "https://healthy-food.myshopify.com/admin/api/2022-01/graphql.json",
method: 'POST',
headers: {
"X-Shopify-Access-Token": "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"
},
data: {
"query": `
{
products(first: 5) {
edges {
node {
id
title
}
}
}
}
`
}
});
console.log(response.data);
Encountered the error below:
Access to XMLHttpRequest at 'https://healthy-food.myshopify.com/admin/api/2022-01/graphql.json' from origin 'http://localhost:8080' 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.
To address this, added "Access-Control-Allow-Origin": "*" and "Content-Type": "application/json" as shown:
const response = await this.$axios({
url: "https://healthy-food.myshopify.com/admin/api/2022-01/graphql.json",
method: 'POST',
headers: {
"X-Shopify-Access-Token": "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",
"Access-Control-Allow-Origin" : "*", // Here
"Content-Type": "application/json" // Here
},
data: {
"query": `
{
products(first: 5) {
edges {
node {
id
title
}
}
}
}
`
}
});
console.log(response.data);
Unfortunately, the same error persists:
Access to XMLHttpRequest at 'https://healthy-food.myshopify.com/admin/api/2022-01/graphql.json' from origin 'http://localhost:8080' 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.
Any suggestions on resolving this issue?