Basic API request failing

[seandz]

In Chome browser a get request works as expected:

// 20191022003422
// https://shopifyStore.myshopify.com/admin/api/2019-07/script_tags.json

{
  "script_tags": [    
  ]
}

But my embedded app has trouble logging this same response:

<button onClick={async () => {
  try {
    const response = await fetch('http://shopifyStore.myshopify.com/admin/api/2019-07/script_tags.json', {
      mode : 'no-cors'
    });
    console.log(await response.json(), `=====response.json()=====`);
  }
  catch (e) {
    console.log(e, `=====e=====`);
  }
}}>Click to see data</button>

// Chrome console error
SyntaxError: Unexpected end of input
at _callee$ (_app.js:57)
at tryCatch (runtime.js:62)
at Generator.invoke [as _invoke] (runtime.js:288)
at Generator.prototype.<computed> [as next] (runtime.js:114)
at asyncGeneratorStep (asyncToGenerator.js:5)
at _next (asyncToGenerator.js:27) "=====e====="

// if I remove the mode or set it to 'cors' I see this:
'http://shopifyStore.myshopify.com/admin/api/2019-07/script_tags.json' from origin 'https://7626bdfa.ngrok.io' has been blocked by CORS policy: 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.

The embedded app is a node/react app freshly created from the shopify app cli. What am I doing wrong in my test API request?

[hassain · Accepted solution]

Hey @seandz ,

To answer why you are receiving the initial "Unexpected end of input" error, if you look into the "Network" tab of your Chrome Developer Tools when you press the button you should probably see that the network request for the admin/api/2019-07/script_tags.json object results in a 401 Error - Unauthorized. This is because you are making an unauthorized request to the Shopify Admin API, and your app must authenticate itself first before reading data from Shopify. Please read the following documentation on how to make authenticated requests to the Admin API using the custom header of 'X-Shopify-Access-Token': https://help.shopify.com/en/api/getting-started/authentication/oauth#step-4-making-authenticated-req...

However in order to add the custom header of 'X-Shopify-Access-Token' to your Fetch call, you will need to remove the 'no-cors' mode header which will then give you with the error of "... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

This is because If you want to make a request to the Admin API, you have to do it from a back end. Front end requests to the Admin API will always be blocked by the CORS policy on our end. What you can do is from your front end is delegate to your backend to make the authenticated request to the Admin API, and return the response data from that request to your front end.

[seandz]

Thank you @hassain . I scaffolded an app with shopify cli. Can you give me a sample code snippet to handle requests using your scaffolded koa server to a protected route?

[hassain]

Hey @seandz ,

Glad you found my answer helpful

In terms of sample code, have you had a chance to go through our official tutorial on how to build an embedded Shopify app using Node.js and React? This tutorial goes over how to use the koa-middlewear with your embedded app and how to make requests to the Admin API in the backend. You can also view the final code from this tutorial here