javascript - CORS error when using shopify admin api in front end - Stack Overflow

admin管理员组

文章数量:1329392

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.

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.

• javascript
• shopify-api

Share Improve this question Follow asked Sep 20, 2021 at 7:27 muaz deyabmuaz deyab 3111 gold badge11 silver badge44 bronze badges 11

• 4 Yep an admin API isn't meant to be called directly from a browser. Reason : you will probably need to use a super-secret API key, and nothing can be secret in a browser, so it's contradictory. – Jeremy Thille Commented Sep 20, 2021 at 7:32
• can u tell me how can I solve this? – muaz deyab Commented Sep 20, 2021 at 7:35
• 1 Call the API from your server, not your browser – Jeremy Thille Commented Sep 20, 2021 at 7:40
• can I do in other way if I don`t have access to the server – muaz deyab Commented Sep 20, 2021 at 9:19
• 1 I feel from now on, I am only going to repeat everything I said above. So again, 1. everything is public in a browser, meaning you can't hide or obfuscate or make something private in a browser, meaning your private key will bee public. And 2. Even if you could, the resource you are calling ACTIVELY REJECTS your request. So, there are two very strong reasons that prevent you from calling an admin API from a browser. In two words : you can't. I don't think I can be more explicit :) – Jeremy Thille Commented Sep 20, 2021 at 9:55

 |  Show 6 more ments

2 Answers 2

Sorted by: Reset to default 5

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 municate 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./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.

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./users');
}

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

本文标签： javascriptCORS error when using shopify admin api in front endStack Overflow