blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-

[Heena_Sehgal]

I was trying  to connect with the another API from shopify store using javascript API, But getting this Access to XMLHttpRequest at 'https://a.klaviyo.com/api/v2/list/TfbEqX/subscribe/' from origin 'https://crushxo.com' 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.

Is there any way that i can resolve it

[Gregarican]

Maybe check here, as it seems relevant --> https://community.shopify.com/c/Shopify-APIs-SDKs/Using-APIs-from-a-different-origin-domain/td-p/502.... Hope this helps!

[Heena_Sehgal]

Yes it is the same issue, But all the conversation issue was still there not resolved, please let me know the method to resolve it, I have waste too much time to read the article in which nothing.

[Gregarican]

You apparently didn't read the thread carefully enough then. Here's the specific response from a Shopify staffer:

If you want to make an API request to the admin API, you have to do it from a back end. Front end requests, as you observed, will be blocked by the CORS policy on our end. What you can do is from your front end, delegate to your backend to make the request, and return the response data from that request to your front end.

---

This means that you will need a back-end middleware piece to make the third-party API call. One that will work with CORS. For example, let's say I need Shopify to integrate with a service called Widgets.Com. Here is how it would be structured:

• The Shopify web session would call out to my middleware service. It could be something as simple as an app proxy (https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extensio...).
• Once my middleware service gets the call then it can in turn make an API call to Widgets.Com. Since I control my middleware service, I control any/all request headers and content. Thereby being able to implement any required CORS policy.
• Once I receive an API response back from Widgets.Com I then pass it back to the Shopify web session.

[Gregarican]

Just a brief follow-up. Another reason why you'd want some middleware is because most of the Shopify web client's front-end experience involves JavaScript. Meaning visibility to the user. You wouldn't want your Klaviyo API credentials directly exposed to the user. Let your middleware hide those specifics. Once your middleware gets the app proxy call, it can validate the call through HMAC signature verification, make the API call to Klaviyo, and pass back the response to the Shopify web client. All the user sees is the AJAX call to the app proxy and whatever response is passed back.