shopify ajax call api cros problem

[AL33]

Hi,

 I am using ajax to call shopify api to get pages.json data in liquid page,

It works before changing the domain name, but there are cross domain issues after changing the domain name.

I don’t know how to fix the problem.

Waiting for you reply, thanks.

Code:

jQuery.ajax({

                 url: "/admin/api/2022-07/pages.json?title="+title,

                 type: "GET",

                 crossDomain: true,

                 dataType: "json",

                 contentType: "application/json;charset=utf-8",

                 headers: { "X-Shopify-Access-Token": shopifyToken },

                 success: function(result) {

                    if (result.pages.length > 0) {

                    }

                 }

                 });

Error:

Access to XMLHttpRequest at 'https://xxx.myshopify.com/admin/api/2022-07/pages.json?title=Residential%20District' (redirected from 'https://newxxx.hk/admin/api/2022-07/pages.json?title=Residential%20District') from origin 'https://newxxx.hk' 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.

[Akibhusen]

Please try the below code and check:

Shopify.request({
  url: "/admin/api/2022-07/pages.json",
  type: "GET",
  dataType: "json",
  data: { title: title },
  success: function(result) {
    if (result.pages.length > 0) {
      // Handle the success response here
    }
  },
  error: function(xhr, status, error) {
    // Handle any errors that occur during the request
  }
});

In this code, the Shopify.request function is used to make the API request to the /admin/api/2022-07/pages.json endpoint. The data option is used to pass the query parameter title. The response will be in JSON format, which can be handled in the success callback function.

Please note that you need to make sure the code is running within a Shopify theme or a Shopify app to have access to the Shopify Ajax API.

[AL33]

Uncaught TypeError: Shopify.request is not a function

I write the code in the liquid page.

[Akibhusen]

Try the below code and let me know if it works or not.

<script>
  var url = "/admin/api/2022-07/pages.json";
  var params = { title: {{ title | json }} };
  var headers = { "X-Shopify-Access-Token": {{ shopifyToken | json }} };

  fetch(url + "?" + new URLSearchParams(params), { headers: headers })
    .then(function(response) {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error("Request failed with status " + response.status);
      }
    })
    .then(function(result) {
      if (result.pages.length > 0) {
        // Handle the success response here
      }
    })
    .catch(function(error) {
      // Handle any errors that occur during the request
    });
</script>

make sure to replace {{ title }} and {{ shopifyToken }} with the appropriate values.

[AL33]

CROS problem: 

My shopify website has been set new domain, and redirects....

[AL33]

Not working.

[Akibhusen]

Is it possible to access your theme code? I'll check and try some alternative ways to solve the issue.

[AL33]

I don't know how to let you check my theme code.

It works before changing the domain name, but there are cross domain issues after changing the domain name and set some redirects.

Is there something wrong with my domains?

[Akibhusen]

You have to update the title with your page and the Shopify token with the generated key in the App. Check attached screenshot to update token key: