Why does making a GET request to URL using fetch gives me an error while injecting a script tag programmatically with URL as src doesn't?

Question

If I inject a script programmatically like this:

((global, url) => {
    let s = document.createElement('script')
    s.src = url 
    global.document.body.appendChild(s)
})(window, 'https://example.com')

The request will go through just fine and the script will be inserted with the response to the request to "https://example.com" ... but if I try to make an explicit fetch request to the same URL I get a CORS error? Why is that happening?

The url i put above is just an example for explanation purposes, just in case. — Ariel, Jun 15 '22 at 17:28

score 1 · Accepted Answer · answered Jun 15 '22 at 17:41

1

You just invented JSONP :D Description from w3school:

JSONP stands for JSON with Padding. Requesting a file from another domain can cause problems, due to cross-domain policy. Requesting an external script from another domain does not have this problem. JSONP uses this advantage, and request files using the script tag instead of the XMLHttpRequest object.

Here is explanation on stackoverflow

answered Jun 15 '22 at 17:41

sashok1337

1,019
1
7
14

Cool!. Didn't know I could do that. – Ariel Jun 15 '22 at 20:31

Why does making a GET request to URL using fetch gives me an error while injecting a script tag programmatically with URL as src doesn't?

1 Answers1