Cross-origin resource sharing (CORS)
Pour accéder aux ressources d'un autre serveur, il faut que celui-ci l'autorise. Sinon une erreur sera émise.
Access to fetch at '...serveur visé...' from origin '...serveur appelant...' 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.
Pour autoriser les requêtes sur votre serveur, il faut ajouter à celui-ci l'autorisation. Si vous n'avez pas accès aux paramètres du serveur, vous pouvez ajouter un htaccess dans le dossier concerné.
Header set Access-Control-Allow-Origin: *
Attention, autoriser l'accès à tous n'est pas forcément une bonne idée.
Pour plus d'informations :
https://developer.mozilla.org/fr/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
Complément :
Pour nos exemples, nous utiliserons le site apicarto.ign.fr notament la ressource apicarto.ign.fr/api/doc/codes-postaux qui fournit des données en fonction du code postal. Ce site autorise le CORS
Comme il est expliqué sur le site, il suffit de fournir le code postal dans l'url de la requête.
Si vous allez à l'adresse https://apicarto.ign.fr/api/codes-postaux/communes/62000 vous récupérez une page avec un contenu Json correspondant aux villes dont le code postal est 62000.
Avec une requête fetch cela nous donne :
fetch("https://apicarto.ign.fr/api/codes-postaux/communes/62000").then((response)=>console.log(response))
Vous pouvez tester ce code dans votre console.
response est un objet de constructeur Response. Différentes méthodes de Response permettrons de récupérer le contenu sous différentes formes.