API ERROR Fetch

FranciscoBlanco
Tourist
11 0 1

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

Replies 7 (7)
Greg_Kujawa
Shopify Partner
1020 83 262

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
Tourist
11 0 1

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

FranciscoBlanco_0-1610053029399.png

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

Greg_Kujawa
Shopify Partner
1020 83 262

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:

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

FranciscoBlanco
Tourist
11 0 1

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 

FranciscoBlanco_0-1610054451223.png

works correctly

but if I do it from the app through fetch

FranciscoBlanco_1-1610054531063.png

the following error occurs

FranciscoBlanco_2-1610054566464.png

 

 

FranciscoBlanco
Tourist
11 0 1

Hello?

Greg_Kujawa
Shopify Partner
1020 83 262

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
Tourist
3 0 1

@Greg_Kujawa 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!