Desde mi interfaz, intento obtener productos con la API de administración (GraphQL) de Shopify con el siguiente código:
* Usé "axios" en Quasar Framework y esto es 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);Pero recibí este error como se muestra a continuación:
El acceso a XMLHttpRequest en 'https://healthy-food.myshopify.com/admin/api/2022-01/graphql.json' desde el origen 'http://localhost:8080' ha sido bloqueado por la política CORS: Respuesta a la verificación previa la solicitud no pasa la verificación de control de acceso: no hay un encabezado 'Access-Control-Allow-Origin' en el recurso solicitado.
Entonces, a continuación, agregué el encabezado "Access-Control-Allow-Origin": "*" y "Content-Type": "application/json" como se muestra a continuación:
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);Pero sigo teniendo el mismo error:
El acceso a XMLHttpRequest en 'https://healthy-food.myshopify.com/admin/api/2022-01/graphql.json' desde el origen 'http://localhost:8080' ha sido bloqueado por la política CORS: Respuesta a la verificación previa la solicitud no pasa la verificación de control de acceso: no hay un encabezado 'Access-Control-Allow-Origin' en el recurso solicitado.
¿Hay alguna forma de solucionar el error?
No puede usar la API de administración desde su interfaz para obtener productos de Shopify . Solo Storefront API está disponible desde su interfaz , así que reemplace la URL con:
// "/admin" is removed "https://healthy-food.myshopify.com/api/2022-01/graphql.json"Luego, reemplace el encabezado "X-Shopify-Access-Token" con "X-Shopify-Storefront-Access-Token" como se muestra a continuación:
"X-Shopify-Storefront-Access-Token": "yourStorefrontAccessToken"Finalmente, para los encabezados, solo "X-Shopify-Storefront-Access-Token" es suficiente, por lo que no necesita "Access-Control-Allow-Origin": "*" y "Content-Type": "application/json" .
Este es el código completo que funciona:
const response = await this.$axios({ // "/admin" is removed url: "https://healthy-food.myshopify.com/api/2022-01/graphql.json", method: 'POST', headers: { "X-Shopify-Storefront-Access-Token": "yourStorefrontAccessToken" // "X-Shopify-Access-Token" is replaced with "X-Shopify-Storefront-Access-Token" }, data: { "query": ` { products(first: 5) { edges { node { id title } } } } ` } }); console.log(response.data);Puede consultar la documentación .
La API de administración solo se puede usar con el token de la API de administración.
Solo puede acceder a la API frontal de la tienda en su tema.