Script tag post returns unauthorized

Solved
Highlighted
Excursionist
15 2 0

In Postman i get the response of all http requests to script-tags api,

but in my react app, it always return 401: unauthorized, whereas i provide same accessToken, content-type and payload as in Postman.

 

 

Here is my code:

let domain = localStorage.getItem("domain");
    let accessToken = Cookies.get('accessToken');



    let apiVersion = "2019-10";
    const urlScriptTag = domain + "/admin/api/" + apiVersion + "/script_tags.json";


const headers_inj = {
      "X-Shopify-Access-Token": accessToken,
      "Content-Type": "application/json"
    }


    const payload = {
      "script_tag": {
        "event": "onload",
        "src": "https:// **** **** .js"
      }
    }


axios.post(urlScriptTag, payload, { headers: headers_inj }).then(res => {
      console.log(res)
    }).catch(err => console.log(err))

Here in server.js i provide scopes and save accessToken:

....

app.prepare().then(() => {
  const server = new Koa();
  server.use(session(server));
  server.keys = [SHOPIFY_API_SECRET_KEY];

  server.use(
    createShopifyAuth({
      apiKey: SHOPIFY_API_KEY,
      secret: SHOPIFY_API_SECRET_KEY,
      scopes: ['read_script_tags','write_script_tags'],
      afterAuth(ctx) {
        const { shop, accessToken } = ctx.session;
        ctx.cookies.set('shopOrigin', shop, { httpOnly: false });
        console.log(accessToken);
        ctx.cookies.set('accessToken', accessToken, { httpOnly: false });
        ctx.redirect("/");
      }
    })
  );

.....

this is the response in postman:

Untitled1.png

and this is the error in chrome:

Untitled2.png

0 Likes
Shopify Expert
679 170 197

Hi, @AceBlazer ,

This is Evita from On The Map.

 

1. Did you console.log the accessToken?

2. Where are you running the code if it has blocked cors? But you can fix this by adding this package in your server.js file before ShopifyAuth function.

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Excursionist
15 2 0

i even tried it with angular and hardcoded the access token but still getting 401: unauthorized

0 Likes
Shopify Expert
679 170 197

Hmm...And right now on what you are running the project? React or Angular?

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Excursionist
15 2 0
  • console.log gives me the right token. i even tried it hardcoded.
  • i run the server in the same application (tried it with ngrok and custom https domain).
  • the package didn't solve the problem.
0 Likes
Excursionist
15 2 0

i run the app on react but i just used angular to test

0 Likes
Shopify Expert
679 170 197

Try adding your script in createShopifyAuth in AfterAuth function. Just for testing.

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Shopify Expert
679 170 197

Also, the issue would be in axios, usually axios is used in storefronts, not in node js projects, try using this - https://www.npmjs.com/package/request-promise

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Excursionist
15 2 0

i think its not about axios because i tried it with HttpClient of angular 

0 Likes

Success.

Excursionist
15 2 0

i figured it out! 

as the response from hassain in this post says:

the api call must be in the server side. So i added an express endpoint in node js that calls the api with axios and called this endpoint from react

0 Likes