Using APIs from a different origin/domain

Solved
fallen-domino
Shopify Partner
61 0 10

Since my question is closely related to the way the convo has shifted, I'm using the Storefront API and am getting a CORS error from a Gatsby development server on localhost.  

Been reading for a few days now and can't figure it out why this is happening.  Does CORS behave differently for localhost?

Thanks

0 Likes
HunkyBill
Shopify Expert
4372 36 467

When you setup a token to do Storefront API calls, do you not pin it to a domain? I pin my to https://mystore.test for example, as the .test domain is perfect for localhost work. So I get no CORS problems. But if you pinned your token to a different domain from your calls, CORS is indeed your problem. Without more details, it is hard to help you out.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
fallen-domino
Shopify Partner
61 0 10

Thanks for the quick reply.  I did a little more investigating and realized that my environment variable isn't suppose to include ".myshopify.com" so it was appended twice and I'd been staring for so long I was blind to it.  I didn't consider that because Gatsby's Shopify source plugin was doing static graphql queries successfully using the same source plugin with the same credentials, but not queries in the browser.  Not sure why.

Appreciate the help

0 Likes
andrewscott
Shopify Partner
4 0 0

Hey Alex,

I can't figure out how to delegate this to the backend. Is there any documentation?

I'm trying to GET /admin/api/themes/{theme_id}/assets.json from the index.js of a custom app that's embedded in the Shopify Admin.

It is similar to registering a webhook?

I've looked everywhere but I can find a concrete example of how to do this.

 

Cheers!

Andrew

0 Likes
HunkyBill
Shopify Expert
4372 36 467

A theme asset is not pinned to a "custom App" embedded in the Admin. Assets belong to a theme, and hence are available to any App with API permission to read theme assets. If you are having trouble making API GET requests for theme assets, ensure your App has permission to do so. After that, it remains a simple GET.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
andrewscott
Shopify Partner
4 0 0

I was trying that at first. I'm using ngrok to develop the app and tried a few different get combinations:

fetch("/admin/api/themes/{theme_id}/assets.json", {method: "GET"}) - this fetched https://no234oiasd.ngrok.io/admin/api/..etc and returned 404.

fetch("{hardcoded_store_name}//admin/api/themes/{theme_id}/assets.json", {method: "GET"}) - cors policy, and an opaque response.

 

I do have the app set up for theme permissions as well. 

 

0 Likes
HunkyBill
Shopify Expert
4372 36 467

1. the correct endpoint is /admin/api/2020-10/themes/{theme_id}/assets.json

2. If you are getting CORS errors you are doing your API calls all wrong. That would be an indication you are calling from some domain other than your App, which is clearly a violation of CORS

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
andrewscott
Shopify Partner
4 0 0

Yeah, sorry the endpoint I'm using is that one (I can paste it into the URL of the store I'm developing for and receive the output I'm expecting).

So, I followed the Shopify React/Node.js custom app tutorial and got to the end with all the steps working. So, now I have a custom app that's embedded in the Shopify Admin Panel. 

I'm just looking to start with a button (on the index.js page) that returns the /admin/api/../assets.json data to the console.

I can't find any documentation that shows how to simply query that endpoint from the index.js page. Is there documentation that you can point me towards? 

 

I am using ngrok so my domain is different than my store but I do have the /auth/callback set to the ngrok url I'm using. I've seen that I might have to set up a route in server.js that index.js calls but I just can't find the right docs. 

 

Thanks for the help btw

0 Likes
Greg_Kujawa
Shopify Partner
965 80 204

The easiest way to avoid all the pitfalls you are running into would be to implement this functionality via an app proxy --> https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extensio.... Once this app proxy is configured and installed in the Shopify store then you just reference your URL with the DNS name of the Shopify store. The path equates to the app proxy call, and Shopify does the rest. Your external resource can then validate the API request via HMAC signature verification to ensure the call is legit. Once you get whatever data you need then you pass values back to the request caller. 

0 Likes
HunkyBill
Shopify Expert
4372 36 467

So you speak of index.js being the home page of your own custom embedded App in the Admin. And you don't know where to start. OK. Well, to make a GET request to your App, you can use fetch() or even better, try the axios library. It is simple, and works well with all the bells and whistles. It is likely you can code up your GET request within a minute and see your results. So hook your button click event listener to an axios (or fetch) GET and you will see in the response, what you asked for.

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes