Skip to content

My Workaround Solution for Shopify CORS Ajax issue

So it’s been a week since I started to work on a new Shopify side project. What excites me about this project is that it involves an API integration to the storefront and need some kind of validation for the user login.

Integrating an API to Shopify is new to me. Usually, when working on a Shopify store, I’m customizing the theme template and adding functionality that the default theme doesn’t have. More frontend literal work if you will.

So going back to the project, one part of the process is to validate the unique number from the user that need to pass on a third-party API and will send a response.

Everything is set in theory. I will call the API to validate the unique number before the login authentication via AJAX.

But there is unexpected issue. CORS.

The CORS Issue

Generic CORS issue in the Chrome console inspector

Based on what I understand, CORS is a mechanism that defines a procedure in which the browser and the web server interact to determine whether to allow a web page to access a resource from different origin.

This happens when you execute AJAX cross domain request using jQuery Ajax interface, Fetch API, or plain XMLHttpRequest. As result is that the AJAX request is not performed and data are not retrieved.

So technically, Shopify is somewhat initiating the CORS issue and not allowing my ajax call to get the validation response I need.

The Workaround

I went deep dive into it and explore workaround on how to bypass the CORS error. I see in most Shopify forum, I read a ton of suggestions that I need to call the API in the backend and create an “App Proxy”.

WTF was that?

That will serve as a proxy app that will call the api with proxy sub path instead of calling the api directly to its endpoint.

I spent hours trying to figure out how this thing works but unfortunately, I didn’t find a comprehensive guide and still confused how I can run the proxy app to my store and call the API response.

The Solution

Through my browsing about the issue, I found out that there’s a handful of developers doing a call on the backend without this “proxy app” and directly calling the API via PHP with cUrl.

And *Ding!* that light up the bulb in me. That is totally makes sense. I can create a cUrl calling the API from the backend and use Ajax in the storefront to call that PHP file for me to get the API response.

Here’s the overview:

Shopify -> PHP (cUrl) -> API -> Response

Here’s the PHP code

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

$param1 = $_GET['param1'];
$param2 = $_GET['param2'];

$url = "http://example.com?param1=".$param1."&param2=".$param2;

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "GET");


$headers = array();
$headers[] = "Accept: application/json";
$headders[] = "Access-Control-Allow-Origin: *";
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

$result = curl_exec($ch);
echo json_encode($result);
if (curl_errno($ch)) {
    echo 'Error:' . curl_error($ch);
}
curl_close ($ch);

Ajax code

$.ajax({
    dataType: "json",
    url: "https://my-example-php-domain.com/shopify.php",
    data: payload,
  }).done(function ( response ) {
    var data = JSON.parse(response);
      console.log(data);
  });

And That’s It!

If you are having the same issue, I hope this helps. Cheers, take care!

Previous article

It's Okay To Use Drag & Drop Website Page Builders

Next article

Lessons I've Learned at 27

Join the discussion

Leave a Reply