Shopify API Cross Domain Ajax Request

Question

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.

*“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, Sep 26 '17 at 06:35
If i paste "https://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, Sep 26 '17 at 06:50
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 https://stackoverflow.com/questions/45557941/401-error-jwt-token-not-found-using-fetch/45559433#45559433. See also the *How to avoid the CORS preflight* section of the answer at https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141 for some possible ways to work around this. — sideshowbarker, Sep 26 '17 at 06:57
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, Sep 26 '17 at 06:59
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, Sep 26 '17 at 07:03
`function setEmailWithLoggedInUser(callback) { $.ajax({ url: 'https://widgets.agilecrm.com/shopify/get_customer_data.php', crossDomain: true, dataType: 'json', success: function(data){ if(callback) callback(); } }) }` I tried using my php backend as well. I see the error: `XMLHttpRequest cannot load https://widgets.agilecrm.com/shopify/get_customer_data.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.beirutshopping.com' is therefore not allowed access.` — user3326941, Sep 26 '17 at 07:13

score 2 · Answer 1 · answered Sep 29 '17 at 15:46

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.

score 0 · Answer 2 · edited Feb 25 '19 at 12:21

0

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'
    });
});

edited Feb 25 '19 at 12:21

Suraj Rao

29,388
11
94
103

answered Feb 25 '19 at 12:03

Abadhesh Savita

1
1

1

Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation would greatly improve its long-term value](//meta.stackexchange.com/q/114762/206345) by showing _why_ this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you've made. – Suraj Rao Feb 25 '19 at 12:22

Shopify API Cross Domain Ajax Request

2 Answers2