Cannot make script tags work properly

[Kenny-Gin]

Hello community, 

I am a fairly new junior software developer and have been trying to learn how to make simple apps on the Shopify Platform. At the moment I have an idea of making an app that interacts with the Script Tag Resource API but haven't managed to display my script on the storefront. At the moment I am just trying to make a simple "Hello World" appear somewhere on the storefront but to no success. I am not sure where/what I am doing wrong so any hints/tips would be greatly appreciated.

This is how far I've come:

 

The script is displayed as being found on the test store if you look in the browser, but it contains nothing. It is completely empty.

I also get back this in the browser's console: 

This is the code that I am trying to execute (the script creator):  

import fetch from 'node-fetch'

const scriptTagBody = JSON.stringify({
  script_tag: {
    event: "onload",
    src: `${process.env.HOST}/scripts/cookie-banner-client`,
    display_scope: "all"
  },
});


export const createCookieBannerScript = async (shop, accessToken) => {
  console.log("Reached POST");
  const response = await fetch(
    `https://${shop}/admin/api/2020-04/script_tags.json`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
        "X-Shopify-Access-Token": accessToken,
        "Accept" : "*/*",
        
      },
      body: scriptTagBody,
    }
  );
  return response;
  //const responseJson = await response.json();
  //console.log(responseJson);
  //return responseJson
};

The "Hello World"-script: 

function cookieBanner () {
    return ( 
        <div>
            <p style={{backgroundColor:"hotpink"}}> Hello world</p>
        </div>
    )
}
export default cookieBanner

The place the script creator gets called in server.js: 

 router.get("*", verifyRequest(), async ctx => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
    const {shop, accessToken} = ctx.session
    await handlers.createCookieBannerScript(shop, accessToken)

Some additional info maybe that I am using ngrok to host the script at the moment and the URL pathway to the script displays "Hello world" properly so I know that the pathway works.

Any and all tips would be greatly appreciated.

Thanks in advance!

/Kenny

[GMKnight]

Hi Kenny,

I don't think you need those headers because you're not serving cross site. Is have used the following quite successfully without CORS problems:

const data = {
    'script_tag': {
        'event': 'onload',
        'src': SCRIPT_TAG_SRC,
        'display_scope': 'online_store'
    }
};

const config = {
    headers: {
        'X-Shopify-Access-Token': accessToken
    }
};

const response = await axios.post(url, data, config);

Essentially you are doing the right thing.

I generally serve scripts from my public/scripts directory (you might want to look at koa-static package).

Also the recommended way for your script is by using a closure:

https://shopify.dev/tutorials/include-javascript-in-shopify-themes

You can then use something like XMLHttpRequest in your closure to get any data you need from your server.

Hope this helps a little. Just how I do it. I'm sure there are other ways.

GMKnight.