Shopify App Proxy --- new CORS error?

Solved
Greg_Kujawa
Shopify Partner
1016 83 237

This deployment scenario has been working fine for at least a year now, but recently has broken. So our Shopify shop hits our third-party API web service via a Shopify app proxy for a single method. Specifically for obtaining a JWT we use for the duration of the session. I verify the app proxy's HMAC signature in that app proxy call, and if it's kosher than I return the JWT back to the Shopify shop user's session.

Just recently (perhaps due to a Chrome change) we are consistently getting back an "Access to XMLHttpRequest at 'https://{web_proxy_shop}.myshopify.com/apps/dch-webapi' from origin 'https://{front_end_shop}.myshopify.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource " error showing on the Chrome console.

On my end of the app proxy, I have added an 'Access-Control-Allow-Origin: *' header to all responses. Is it something in the Shopify app proxy mechanism that's stripping this, or has Chrome otherwise broken this functionality?  

0 Likes
Greg_Kujawa
Shopify Partner
1016 83 237

Looking on my end, I can't even see the API token requests hitting my server when the CORS error comes up. Not even making it that far. So either the Chrome user session is blocking the request from being issued, or else Shopify's app proxy is dropping the request. When I launch Chrome with the –disable-web-security –user-data-dir=~/chromeTemp CLI options I see the requests being logged and everything "just works." Trying to narrow this down between something I can tweak on the Shopify shop's front-end or perhaps in the app proxy configuration and deployment.

0 Likes
Greg_Kujawa
Shopify Partner
1016 83 237

This is an accepted solution.

I had the app proxy URL specified as the partner development store's, where the app proxy lives. But since this is installed as an app in our Shopify shop I just changed the first URL segment to be that of the Shopify shop. All is well *duh*. 

function getSessionToken(myValue) {
        //var tokenUrl = 'https://{my_dev_shop}.myshopify.com/apps/dch-webapi'; // WRONG
        var tokenUrl = 'https://{my_real_shop}.com/apps/dch-webapi'; // RIGHT
  	    var strData = '';
  		$.ajax({
            type: 'GET',
            url: tokenUrl,            
            success: function (data) {
            strData = JSON.stringify(data);
            strData = strData.replace(/\"/g, "");
            sessionSet("jwt", strData, 3);
        	}
        });
  		return strData;
    }

 

0 Likes
mjmabato
New Member
9 0 0

other than creating app proxy, are there any other setup needed in the application?

0 Likes
Greg_Kujawa
Shopify Partner
1016 83 237

I would suggest having the app perform HMAC signature validation before honoring any requests that come in. That's described in the Shopify app proxy online documentation I believe. Other than that it's pretty straightforward!

0 Likes