Wir haben das folgende Setup:
Front end code : REACT (Hosted using express js) (lets call this www.domainA.com)
Backend : .NET WEB API (Hosted in IIS 7.5) (lets call this www.domainB.com)
Die Domäne der FE-App fordert GET-Daten und POST -Daten an die Web-API an.
Das GET funktioniert einwandfrei. Wenn ich jedoch versuche, POST -Daten an die Web-API anzulegen, wird der folgende Fehler ausgegeben:
Request URL: http://www.domainB.com/api/postdataoperation
Request Method: OPTIONS
Status Code: 403 Forbidden
Ich habe mir viele CORS-Artikel angesehen und ging vor, HTTPResponseHeaders in IIS wie folgt einzurichten:
Access-Control-Allow-Methods : POST,GET,OPTIONS,PUT,DELETE
Access-Control-Allow-Origin : http://www.domainA.com
Die Post-Anforderung von der Reaktionslösung lautet wie folgt:
axios.post(`http://www.domainB.com/api/postdataoperation`, {userId});
Das Problem ist, dass Ihr Server nicht so konfiguriert ist, dass er aufOPTIONS-Anfragen mit dem richtigen Antwortstatus reagiert, 2xx Erfolgsstatus .
Das GET funktioniert, weil es keine Preflight-Anforderung stellt, da es die Kriterien erfüllt, dass es sich um eine einfache Anforderung handelt wie in der CORS-Dokumentation definiert
Andererseits erfüllt die Anforderung POST die Kriterien für eine Preflight-Anforderung , dh eine Preflight-Anforderung OPTIONS sollte zuerst gestellt werden.
Kurz gesagt, Sie haben die CORS-Antwortheader richtig eingerichtet, der Server ist jedoch nicht so konfiguriert, dass er mit einer Antwort von 2xx auf die Anforderungen der OPTIONS-Methode antwortet (üblicherweise 200 Status).
Der Server muss auf OPTIONS-Anforderungen mit einem Erfolgsstatus von 2xx antworten - normalerweise 200 oder 204.
Wenn der Server dies nicht tut, ist es unerheblich, für welche Header von Access-Control- * Sie ihn konfiguriert haben. Die Antwort auf die Konfiguration des Servers, um OPTIONS-Anfragen auf die richtige Art und Weise zu senden - eine 200- oder 204-Erfolgsmeldung zu senden - hängt von der Serversoftware ab, auf der er ausgeführt wird
Ausleihen der Lösung von diese Antwort , tun Sie dies in Ihrem Backend, .NET WEB API:
In Ihrer BaseApiController.cs :
Wir machen dies, um das Verb von OPTIONS http zuzulassen
public class BaseApiController : ApiController
{
public HttpResponseMessage Options()
{
return new HttpResponseMessage { StatusCode = HttpStatusCode.OK };
}
}
Antwort für Preflight 403 verboten
Das Ausführen eines nodejs-Servers auf domainA.com ist irrelevent. Die "axios" library kann entweder verwendet werden, um a) XMLHttpRequests vom Browser aus durchzuführen oder b) um http-Anforderungen von node.js zu stellen. In diesem Fall ist es die erste Option, die "axios.post" an domainB über einen XMLHttpRequest des Browsers auszuführen. Deshalb erhalten Sie eine Preflight-Anfrage an domainB.com .
Die Antwort von Jannes Botis erklärt den Preflight-Mechanismus gut. Ich füge nur den Code hinzu, den ich verwende, um dieses Problem in Node.js/Express zu lösen
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', 'http://www.domainA.com');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, DELETE, OPTIONS');
res.setHeader(
'Access-Control-Allow-Headers',
'Origin, X-Requested-With, Content-Type, Accept, Authorization'
);
next();
});
// All OPTIONS requests return a simple status: 'OK'
app.options('*', (req, res) => {
res.json({
status: 'OK'
});
});
app.get('/', ...);
app.post('/api/postdataoperation', ...);
was ist die Ausgabe von der .NET-Web-API, wenn die Anforderung POST fehlschlägt?