Same Origin Policy: Why can’t JS code make an HTTP request to its domain?

Example

I have a site http://example.com. This site uses a third-party JS code: <script src="http://third.party/script.js"></script>

The http://third.party/script.js contains the following code:

console.log("self.origin", self.origin);
fetch("http://third.party/api");

When I open http://example.com, I get the following output in dev console:

self.origin http://example.com

Access to fetch at 'http://third.party/api' from origin 'http://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

The third party script tried to load data from the third-party API, but it failed. Why did it fail?

The third party script and API have the same domain name (origin). Should it be allowed by Same Origin Policy?

Answer

The origin is determined by the URL of the webpage the JavaScript is loaded into, not the URL of the JS file itself.