when following the Connect to your app's backend guide, i got stuck there is a cors issue, even when it is supposed to authenticate your request from the extension
there is something missing on the guide
const getIssueRecommendation = useCallback(async () => { // Get a recommended issue title and description from your app's backend setLoadingRecommended(true); // fetch is automatically authenticated and the path is resolved against your app's URL const res = await fetch( api/recommendedProductIssue?productId=${data.selected[0].id}`,
);
setLoadingRecommended(false);
if (!res.ok) {
console.error("Network error");
}
const json = await res.json();
if (json?.productIssue) {
// If you get an recommendation, then update the title and description fields
setIssue(json?.productIssue);
}
}, [data.selected]);`
here is the getIssueRecommendation function as specified and my backend route is
app/routes/api/recommendedProductIssue.js
here is my backend code
`import { json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }) => {
// The authenticate.admin method returns a CORS method to automatically wrap responses so that extensions, which are hosted on extensions.shopifycdn.com, can access this route.
const { cors } = await authenticate.admin(request);
const productIssues = [
{ title: "Too big", description: "The product was too big." },
{ title: "Too small", description: "The product was too small." },
{
title: "Just right",
description:
"The product was just right, but the customer is still unhappy.",
},
];
// Get the product Id from the request
const url = new URL(request.url);
const productId = url.searchParams.get("productId");
var splitStr = productId.split("/");
var idNumber = parseInt(splitStr[splitStr.length - 1], 10);
// Our proprietary machine learning algorithm automatically determines the best product issue :).
const issue = productIssues[idNumber % productIssues.length];
// Wrap the response in the CORS method so that the extension can access it
return cors(json({ productIssue: issue }));
};
`
i am following the remix notation for resource routes as specified here
https://remix.run/docs/en/main/guides/resource-routes#resource-routes
so what else is needed to be setup?
is there anything that needs to be configure from the partners panel or the admin panel
or is there any extra configuration which needs to be done in one of my .toml files? or the shopify.server.js?
help me please i have been trying some options and i haven't been able to rid off this cors issue
when following the Connect to your app's backend guide, i got stuck there is a cors issue, even when it is supposed to authenticate your request from the extension
there is something missing on the guide
const getIssueRecommendation = useCallback(async () => { // Get a recommended issue title and description from your app's backend setLoadingRecommended(true); // fetch is automatically authenticated and the path is resolved against your app's URL const res = await fetch(api/recommendedProductIssue?productId=${data.selected[0].id}`,);
setLoadingRecommended(false);
}, [data.selected]);`
here is the getIssueRecommendation function as specified and my backend route is
app/routes/api/recommendedProductIssue.js
here is my backend code
`import { json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }) => {
// The authenticate.admin method returns a CORS method to automatically wrap responses so that extensions, which are hosted on extensions.shopifycdn.com, can access this route.
const { cors } = await authenticate.admin(request);
const productIssues = [
{ title: "Too big", description: "The product was too big." },
{ title: "Too small", description: "The product was too small." },
{
title: "Just right",
description:
"The product was just right, but the customer is still unhappy.",
},
];
// Get the product Id from the request
const url = new URL(request.url);
const productId = url.searchParams.get("productId");
var splitStr = productId.split("/");
var idNumber = parseInt(splitStr[splitStr.length - 1], 10);
// Our proprietary machine learning algorithm automatically determines the best product issue :).
const issue = productIssues[idNumber % productIssues.length];
// Wrap the response in the CORS method so that the extension can access it
return cors(json({ productIssue: issue }));
};
`
i am following the remix notation for resource routes as specified here
https://remix.run/docs/en/main/guides/resource-routes#resource-routes
so what else is needed to be setup?
is there anything that needs to be configure from the partners panel or the admin panel
or is there any extra configuration which needs to be done in one of my .toml files? or the shopify.server.js?
help me please i have been trying some options and i haven't been able to rid off this cors issue