CORS Policy: No 'Access-Control-Allow-Origin' Header Present

CORS Policy: No 'Access-Control-Allow-Origin' Header Present

AhmadH
Shopify Partner
2 0 2
0

I am encountering a CORS (Cross-Origin Resource Sharing) policy issue while trying to authorize a Shopify integration with Backend(Nodejs). Here's the specific error message I'm facing:

Access to XMLHttpRequest at 'https://contosostore.myshopify.com/admin/oauth/authorize?client_id=36eb**********02&scope=write_cust...' (redirected from 'https://localhost:3000/api/shopify/auth') from origin 'https://localhost:4200' 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.

Here's an overview of my setup:

Frontend: Angular Backend: Node.js Shopify Integration: Using the @Shopify/shopify-api library

The issue arises when I click on a "Generate Token" button in my Angular frontend, which initiates the authorization process with Shopify through a request to my Node.js backend. The backend code for the authorization process is as follows:

async auth(_req, _res) {
  // Get Shopify object
  const shopify = await shopifyObject.getShopifyObject();

  // Authorization with Shopify
  await shopify.auth.begin({
    shop: shopify.utils.sanitizeShop('contosostore.myshopify.com', true),
    callbackPath: process.env.SHOPIFY_REDIRECT_URL,
    isOnline: false,
    rawRequest: _req,
    rawResponse: _res
  });

  console.log(shopify);

  // The shopify will call the backend(NodeJs) authCallback function automatically
}

The CORS config in nodejs are,

// Cors setup
APP.use(CORS())
APP.options('*', CORS())

It seems that the CORS issue is preventing my Angular frontend from making requests to Shopify's authorization endpoint. I have ensured that my Shopify app settings are correctly configured with the redirect URL

I've tried various solutions, including adding CORS headers to my Node.js backend, like in this post

Node.js with Angular - CORS error when i send request

but I'm still facing this issue. Any guidance on how to resolve this CORS policy error would be greatly appreciated. Thank you!

Replies 0 (0)