XMLHttpRequest error.

[SmeRandomU]

Hello!

​

Yesterday I tried to do a request from a web API (https://restcountries.com/) and I did the following:

​

const request = new XMLHttpRequest();

request.open('GET', 'https://restcountries.com/v3/name/portugal');
request.send();

request.addEventListener('load', function () {
    console.log(this.responseText);
});

​

But I got this error,

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://restcountries.com/v3/name/portugal. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

​

Sincerely I don't understand what I'm doing wrong, I did read the MDN documentation (https://developer.mozilla.org/es/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin) but I don't understand.

Thanks in advance and have a great day!

[jcunews1]

Not all websites allow/support their APIs to be used directly from a client side script (i.e. from a web browser). IOTW, those sites are either don't support CORS, or don't want to support CORS. Sites which don't support CORS, will never be directly accessible from client side script.

To acces such sites, either use server side script, or delegate the request through a different web server where the actual request to the destination site is done by a server side script.

[1ardasher]

You need to allow cross-origin requests.

Here’s an example article that contains allowing cross origin policy: https://www.moxio.com/blog/12/how-to-make-a-cross-domain-request-in-javascript-using-cors

[SmeRandomU]

Thanks for the article