How can I resolve a CORS policy error when calling a third-party API?

Shopify Discussion
1

Hello There,

I have created store and need to call third party API via ajax those are created by me hosted on different domain. I have added ajax code on product details page. but getting issue while calling API. Here I my API https://devdemo.pro/outreachbee2/API/

Error message in console :

Access to XMLHttpRequest at ‘https://devdemo.pro/outreachbee2/API/index.php’ from origin ‘https://sbd-ds.myshopify.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Please help me how can I achive this?

Thank you,
Sunil D

2

What issue? Hard to give much advice when we don’t know what the problem is, what you see, or what you’ve tried to solve.

3

Hello Jeson,

I am trying to call third party API on product details page for display some additional data through API via AJAX call. See below my ajax code :

$.ajax({
url: “https://devdemo.pro/outreachbee2/API/index.php”,
method: “POST”, // The HTTP method to use for the request
dataType: “json”, // The type of data that you’re exerciseecting back
error: function() {
// A function to be called if the request fails.
},
beforeSend: function() {
// A function to be called if before the request is made.
},
success: function(response) {
console.log(response)
// A function to be called if the request succeeds.
}
});​

I have put this code in product detail template file. It’s call onload page. It’s calling but getting error on console.

This is the page https://sbd-ds.myshopify.com/products/chikan-food where you can see the error on console. Once you check this page. Will get idea. If still please let me know.