Skip to content

Cors issue when trying to access my backend from my extensions #17

@skala2301

Description

@skala2301

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions