API ERROR Fetch

[FranciscoBlanco]

Good morning, I am creating a public app with nodeJs and nextJs but I have a problem when making requests to the api "https: //" + this.props.shopName + "/admin/api/2020-10/metafields.json" as follows var url = "https: //" + this.props.shopName + "/admin/api/2020-10/metafields.json" var myHeaders = new Headers (); myHeaders.append ('Content-Type', 'application / json'); myHeaders.append ('Accept', 'application / json'); myHeaders.append ('Access-Control-Allow-Origin', '*'); myHeaders.append ('GET', 'POST', 'OPTIONS'); myHeaders.append ("X-Shopify-Access-Token", this.props.token); var requestOptions = { method: 'GET', headers: myHeaders, redirect: 'follow' }; fetch (url, requestOptions) .then (response => response.text ()) .then (result => console.log (result)) .catch (error => console.log ('error', error)); however I have this error: from origin 'https://shopify.startscoinc.com' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. How can I make get and post requests to the api? page used: https://testingaveonline.myshopify.com/admin

[Gregarican]

Most seamless solution to avoid the CORS scenario would be to implement access to your third-party API via an app proxy --> https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extensio.... That way your third-party API appears as just an URL path off the Shopify shop. But actually will call out to the third-party API. You can allow/deny the API calls via HMAC signature validation and pass back the responses as you need to. 

[FranciscoBlanco]

what I want is to be able to obtain and modify metafields through "/admin/api/2021-01/metafields.json"

my request already has the validation token

I do not want to redirect requests to an external url, what I want is to be able to make requests to the api since the APP that I am creating needs to save certain configuration on the page, and modify it as well, in addition to adding shipping methods, and meta fields in products and orders

[Gregarican]

I think I get it, but when you are referring to "your app" then that _is_ the external URL in a way. And if you are receiving CORS errors from Shopify it means that it's Shopify's sandbox and they want to have a say on who gets to play there to a degree. The way in which you are calling between domains is likely what the errors are triggered by. 

The way to get this to work is to alias "your app" via a Shopify app proxy. This will make things act as if the calls are going through the real Shopify online shop. Here's an example:

• Let's say I have my own web service. I've created it pretty much like your typical API app. A client makes requests to endpoints and I send back responses in return.
• I have one API endpoint. Located at https://example.com/api/foo. 
• Shopify complains if I call out to this endpoint from https://myshop.myshopify.com, due to CORS.
• I define my app via an app proxy, https://example.com/api aliased to https://myshop.myshopify.com/app.  
• Now my API endpoint is called out via https://myshop.myshopify.com/app/foo. 
• Shopify is happy with the configuration and no CORS errors.

This whole scenario isn't complicated to configure as a one-time deal. And it works, based on experience.

[FranciscoBlanco]

I understand that but I don't want to call outside

the domain of my app is
https://shopify.startscoinc.com/
and the domain of my store is
https://testingaveonline.myshopify.com/
if I make a request from postman using the token 

works correctly

but if I do it from the app through fetch

the following error occurs

[FranciscoBlanco]

Hello?

[Gregarican]

I understand that but I don't want to call outside

If you cannot circumvent the CORS issue then this is exactly what you need to do. Honestly the time it's taken going back and forth has surpassed how long it would've taken to configure an app proxy and be done with it. Not being rude, but trying to understand why a simple addition that will likely resolve the issue isn't viable. 

[mjolliffecasas]

@Gregarican Do you have an example of a simple app set up that does this? Struggling to understand the Shopify app proxy docs as I've never built an app myself. Didn't think it would be so complicated to make a simple API call. Any help would be so great. Thank you!

[fonko]

what about if you are using a private app? i started building a private app in my dev store but I can't find any proxy settings in the app settings! pls help

[Gregarican]

I believe that private apps are being deprecated to a certain degree. In favor of apps that live and breathe within Shopify's app store or custom apps instead. When I wanted to revisit some of my code that I haven't looked at in awhile, I too had trouble finding where the app proxy settings were. I found them looking in my Shopify Partner portal (https://partners.shopify.com/).  

[fonko]

right! thanks for your answer. I already checked your proxy solution and it worked! thanks, sr!