Dynamic loading of script shows different behaviour for same JS file

Question

While loading a JS SDK on our website I was trying out few different ways. I noticed that Snippet 1 causes CORS error, while Snippet 2 loads the same script on same page without any issues.

Snippet 1 (Using document.body.appendChild, throws CORS exception)

 const url = 'https://www.example.com/sdk.js';
 const scriptTag = document.createElement('script');
 scriptTag.setAttribute('crossorigin', 'anonymous');
 scriptTag.setAttribute('src', url);
 document.body.appendChild(scriptTag);

Snippet 2 (Using parentNode.insertBefore, no CORS exception)

 const element = document.getElementsByTagName('script')[0];
 const scriptTag = document.createElement('script');

 scriptTag.async = !0;
 scriptTag.crossorigin = 'anonymous';
 scriptTag.src = 'https://www.example.com/sdk.js';
 element.parentNode.insertBefore(scriptTag, element);

I tried to find why the behaviour is different for each case, but could not find any reason for it.

Can someone point out to me why I see this behaviour?

I think the element property name is "crossOrigin", not "crossorigin". — Pointy
– Pointy, Commented Mar 5, 2020 at 20:14
You are right, just tested with scriptTag.crossOrigin = 'anonymous' and now I get the same behaviour. Thanks! 🙏 — zer0Id0l
– zer0Id0l, Commented Mar 6, 2020 at 6:58

Edu Ruiz · Accepted Answer · 2020-03-05 22:21:18Z

1

The only difference I see running your code is the on pointed by @Pointy on the comment, the first script generates:

<script crossorigin="anonymous" src="https://www.example.com/sdk.js"></script>

the second one:

<script async="" src="https://www.example.com/sdk.js"></script>

running on my console, so probably the crossorigin is responsable for the cors error. (the same happened on console, btw)

answered Mar 5, 2020 at 22:21

Edu Ruiz

1,8771 gold badge17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic loading of script shows different behaviour for same JS file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related