Cannot make script tags work properly

New Member
1 0 0

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: corb_error.png


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(
      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();
  //return responseJson

The "Hello World"-script: 

function cookieBanner () {
    return ( 
            <p style={{backgroundColor:"hotpink"}}> Hello world</p>
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!



Shopify Partner
72 7 30

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',
'display_scope': 'online_store'

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

const response = await, 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:


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.



Store owner and app developer. Canada.