Comment résoudre l'erreur « L'origine n'est pas autorisée par Access-Control-Allow-Origin » dans les requêtes AJAX d'origine croisée ?

Problème : "L'origine n'est pas autorisée par Access-Control-Allow-Origin"

Lors de l'exécution de requêtes AJAX d'origine croisée à l'aide de JavaScript, vous pouvez rencontrer l'erreur suivante :

Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin

Cette erreur se produit en raison de la « politique de même origine », qui est une fonctionnalité de sécurité mise en œuvre dans les navigateurs pour empêcher les scripts malveillants d'accéder aux données d'autres domaines.

Cause

La « Politique de même origine » restreint les requêtes AJAX au même domaine, protocole et port que la page d'origine. Si votre JavaScript est hébergé sur un domaine, un protocole ou un port différent de celui du serveur auquel vous essayez d'accéder, la requête sera bloquée.

Solution : JSONP

Pour contourner le "Same Origin Policy", une solution courante consiste à utiliser JSONP (JSON with Padding). JSONP vous permet d'effectuer des requêtes d'origine croisée en encapsulant la réponse dans une fonction de rappel définie dans votre propre JavaScript.

Voici comment fonctionne JSONP :

1. Définissez une fonction de rappel dans votre JavaScript.
2. Envoyez une requête AJAX avec l'URL se terminant par ?callback={callback_function_name}.
3. Le serveur répond avec des données JSON enveloppées dans la fonction de rappel.
4. Le La fonction de rappel est exécutée et reçoit les données de réponse.

Exemple

Pour résoudre l'erreur dans le code donné, qui tente d'envoyer une requête POST d'origine croisée à YouTube, vous peut utiliser JSONP comme suit :

<code class="javascript">var script = document.createElement('script');
script.src = "http://gdata.youtube.com/action/GetUploadToken?callback=callbackFunction";
document.head.appendChild(script);

function callbackFunction(data) {
    // Use the response data
}</code>

Dans cet exemple, callbackFunction est une fonction définie dans votre propre JavaScript, qui recevra la réponse de YouTube en argument.

Remarque : Il est important de s'assurer que le serveur auquel vous envoyez la requête prend en charge JSONP et que vous utilisez le nom correct de la fonction de rappel dans l'URL.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!