Comment résoudre les erreurs « XMLHttpRequest ne peut pas se charger. La réponse à la demande de contrôle en amont ne réussit pas le contrôle de contrôle d'accès » ?

Contrôle d'accès refusé : dépannage de CORS dans le développement Web

Problème :

Lors de l'utilisation de ngResource pour accéder à une API REST sur Amazon Web Services, vous rencontrez le problème suivant erreur :

XMLHttpRequest cannot load <url>. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<origin>' is therefore not allowed access.

Cause :

Ce problème provient des restrictions de partage de ressources d'origine croisée (CORS), qui empêchent une application Web sur un domaine de faire des requêtes. vers d'autres domaines sans autorisation explicite.

Solutions :

Il existe plusieurs approches pour résoudre les problèmes CORS :

1. Désactivez CORS :

• Dans Chrome, visitez chrome://flags/#disable-web-security
• Définissez « Désactiver la sécurité Web » sur « Activé »
• Remarque : Cette solution ne doit être utilisée qu'à des fins de développement fins.

2. Plugins de navigateur :

• Installez des plugins de navigateur qui désactivent les vérifications CORS, tels que CORS Unblock.

3. Serveur proxy :

• Utilisez un serveur proxy, tel que Nginx, pour gérer les requêtes d'origine croisée. Cela fait croire au navigateur que les requêtes proviennent de l'hôte local.

4. Configuration du serveur :

• Configurez votre serveur pour ajouter des en-têtes Access-Control-Allow-Origin aux réponses. Reportez-vous au site Web Activer CORS pour obtenir des instructions spécifiques en fonction de votre serveur.

5. Exemple HTTP avec promesses :

const makeRequest = (url, options) => {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open(options.method, url);
    request.setRequestHeader('Accept', 'application/json');

    request.onload = () => {
      if (request.status >= 200 && request.status < 300) {
        resolve(request.response);
      } else {
        reject({
          status: request.status,
          statusText: request.statusText
        });
      }
    };

    request.onerror = () => {
      reject({
        status: request.status,
        statusText: request.statusText
      });
    };

    request.send(options.body);
  });
};

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!