CODEWITHSUNDEEP
javascriptshopify-api
muaz deyab
muaz deyab

Reputation: 31

CORS error when using shopify admin api in front end

I have shopify admin api and I want to call it in the front end but when i try to fetch the data it gives me the following error "Access to XMLHttpRequest at 'https://API_KEY:[email protected]/admin/api/2021-07/orders.json' from origin 'null' 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.", I use axios and fetch and both did not work. any help well be appreciated.

Upvotes: 2

Views: 15303

Answers (2)

Ursu Alexandr
Ursu Alexandr

Reputation: 308

If you're encountering a CORS error while attempting to make an external API request from a Remix Shopify APP, the issue may stem from an incorrect method of making API requests within Remix.

According to Shopify's documentation, the initial assumption might be that you need to set up an App Proxy, but this approach is ineffective.

The problem arises because I was trying to make a request in the same manner as a typical React Front End application. This resulted in a CORS error. Since Remix is designed for Server Side Rendering, we need to initiate external resource requests from the backend using Remix's concept of a Loader.

import { useLoaderData } from "@remix-run/react";
import { axios } from "axios";


export async function loader() {
  return await axios.get('https://exteranl-url.com/users');
}

export default function Users() {
  const data = useLoaderData<typeof loader>();
  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Upvotes: 0

kcamel
kcamel

Reputation: 161

Great question! It's one that I have encountered as well. Shopify purposely blocks CORS requests. In order to make requests to your backend you will need to setup a Shopify APP Proxy for your front-end to communicate with.

Essentially what this does, is it permits your front-end to make requests to app/api/v1/orders_endpoint which Shopify will then route to https://yourapp.com/api/v1/orders_endpoints.

Check out the Shopify documentation for more information. The code to verify the signature is in Ruby, but some quick google foo turns up results in Javascript as well, see this stack overlow post.

Upvotes: 5

Related Questions