CORS error while using Shopify Admin API in Angular with HttpClient

Frontend
1

I’m encountering a CORS issue while trying to connect to Shopify’s admin API from my Angular application using the HttpClient. Below is the service code I’m working with:

export class ShopifyConnectionService {
  constructor(private httpClient: HttpClient) { }

  getShopDetails() {
    return this.httpClient.get('https://your-shop-name.myshopify.com/admin/api/2023-01/shop.json', {
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Access-Token': 'your_access_token',
        'Access-Control-Allow-Origin': '*'
      }
    });
  }
}

However, I keep receiving these errors when I try to execute this function:

CORS policy error: Access to XMLHttpRequest at 'https://your-shop-name.myshopify.com/admin/api/2023-01/shop.json' from origin 'http://localhost:4200' has been blocked because of CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS error: Request failed with status 401

What can I do to fix this CORS issue when making requests to Shopify’s API from my Angular app?

2

cORS issues with Shopify’s admin API can’t be fixed client-side - Shopify blocks direct browser requests for security. You need a backend server to proxy the requests. That Access-Control-Allow-Origin header you added won’t work since the server has to send it, not your client.

3

Had this exact problem building an inventory tool. Shopify’s Admin API blocks CORS for browser requests on purpose - it’s a security thing. You can’t fix it by tweaking headers in your Angular service because the browser blocks the request before it even hits Shopify’s servers. Best fix? Set up a Node.js backend to handle the Shopify API calls and serve your Angular app through that. Plus this keeps your access tokens server-side instead of exposing them in the client where anyone can see them.

4

Interesting issue! Quick question - is this for production or just dev work? Making Shopify admin API calls from the frontend exposes your access tokens, which is a security risk. Have you thought about using a backend proxy instead? What does your architecture look like overall?