Shopify API Cross Domain Ajax Request

1
votes

I am using the below code to get the customer details from shopify. I have redirected my domain to the other domain from the shopify admin.

function setEmailWithLoggedInUser(callback) {
$.ajax({
      url: 'https://new-website-shopify.myshopify.com/admin/customers/'+__st.cid+'.json',
      crossDomain: true,
      beforeSend: function(xhr) {
           xhr.setRequestHeader("Authorization", "Basic XXXXXXXXXXXX")
      }, success: function(data){

          console.log(data);

          if(callback)
            callback();      
         }
})

I have done a lot of work around but unable to find the solution. I am getting this error:

Failed to load resource: the server responded with a status of 404 (Not Found)

XMLHttpRequest cannot load https://new-website-shopify.myshopify.com/admin/customers/7094124372.json. Response to preflight request doesn't pass access control check:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.beirutshopping.com' is therefore not allowed access. The response had HTTP status code 404.

2
apicorscross-domainshopify
“the server responded with a status of 404 (Not Found)” is the root problem. The only reason you’re seeing “No 'Access-Control-Allow-Origin' header is present on the requested resource.” is that most servers don’t add headers like the Access-Control-Allow-Origin header to 4xx error responses — instead, servers generally only add those headers to 2xx success responses. If you paste your https://new-website-shopify.myshopify.com/admin/customers/7094124372.json URL (with whatever the real hostname is) into your browser address bar, what happens? – sideshowbarker
If i paste "new-website-shopify.myshopify.com/admin/customers/70‌​94124372.json" with real hostname in the browser, it redirects back to the same domain name, it will ask for the api credentials and then it shows the reponse correctly. – user3326941
You control https://new-website-shopify.myshopify.com/admin/customers/? You able to make configuration changes to it? What server backend does it run? The problem you’re hitting here seems to be the same as explained in the answer at stackoverflow.com/questions/45557941/…. See also the How to avoid the CORS preflight section of the answer at stackoverflow.com/questions/43871637/… for some possible ways to work around this. – sideshowbarker
Yes. I tried those but I haven't find the solution for my case. I am not able to make configuration changes to it. The url here is created from the shopify. – user3326941
If you are not able to make configuration changes to that server, and it requires use of the Authorization header for authentication — including for OPTIONS request — then there’s no way you are ever going to be able to make requests to it directly from frontend JavaScript code running in a browser. There’s no magic that’s going to make that possible. Instead you need to make the request from your backend code, and handle the response there. – sideshowbarker

2 Answers

2
votes

I will save you some headaches with this answer. You cannot call /admin from the front-end of a store, as that exposes your access token to the public. Instead, if you want to access the API from the front-end, use the App Proxy pattern, allowing you to securely make Ajax calls to accomplish your goals.

As it is, you are almost certain to fail, and any success you hack into existence will quickly expose your shop to horrors. Like being replaced with sad pandas, or otherwise being reckd.

0
votes
var cors = require('cors');
router.use(cors({
    origin: '*'
})); 
//var config = require('../config/config.json'); 
//testing /* GET home page. */ 
router.get('/', function (req, res, next) {
    res.setHeader("Content-Type", "application/liquid");
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.render('index', {
        title: 'Store Locator'
    });
});