Wie löst man den Fehler „XMLHttpRequest kann nicht geladen werden. Die Antwort auf die Preflight-Anfrage besteht die Zugriffskontrollprüfung nicht'?

Zugriffskontrolle verweigert: Fehlerbehebung bei CORS in der Webentwicklung

Problem:

Bei Verwendung von ngResource für den Zugriff auf eine REST-API Bei Amazon Web Services stoßen Sie auf Folgendes Fehler:

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.

Ursache:

Dieses Problem ist auf CORS-Einschränkungen (Cross-Origin Resource Sharing) zurückzuführen, die verhindern, dass eine Webanwendung auf einer Domäne Anfragen stellt auf andere Domains ohne ausdrückliche Genehmigung.

Lösungen:

Es gibt mehrere Ansätze zur Lösung von CORS-Problemen:

1. CORS deaktivieren:

• Besuchen Sie in Chrome chrome://flags/#disable-web-security
• Setzen Sie „Web-Sicherheit deaktivieren“ auf „Aktiviert“
• Hinweis: Diese Lösung sollte nur für die Entwicklung verwendet werden Zwecke.

2. Browser-Plugins:

• Installieren Sie Browser-Plugins, die CORS-Prüfungen deaktivieren, z. B. CORS Unblock.

3. Proxyserver:

• Verwenden Sie einen Proxyserver wie Nginx, um ursprungsübergreifende Anfragen zu verarbeiten. Dies lässt den Browser glauben, dass Anfragen vom lokalen Host kommen.

4. Serverkonfiguration:

• Konfigurieren Sie Ihren Server so, dass er den Antworten Access-Control-Allow-Origin-Header hinzufügt. Spezifische Anweisungen für Ihren Server finden Sie auf der Website „Enable CORS“.

5. HTTP-Beispiel mit Versprechen:

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);
  });
};

Das obige ist der detaillierte Inhalt vonWie löst man den Fehler „XMLHttpRequest kann nicht geladen werden. Die Antwort auf die Preflight-Anfrage besteht die Zugriffskontrollprüfung nicht'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!