HTTP-Basisauthentifizierung funktioniert mit jQuery-POST-Anfrage, aber nicht Angular

Question

Update: Zwei Dinge: Erstens gab ich die POST-Anfragen für jQuery und Angular aus zwei verschiedenen Domänen. I created a jsfiddle, um beide Anfragen von der gleichen Domäne zu testen, und sie funktionieren beide. Ich habe versucht, die Fiddle ziemlich allgemein zu machen, so dass Sie die Config-Werte austauschen und eine XML-POST-Anfrage mit einfacher HTTP-Authentifizierung für jede gewünschte Site testen können. Die andere Sache ist, dass mit dem Angular $ http-Service der Data-Type Header den folgenden Fehler ergibt: Request header field Data-Type is not allowed by Access-Control-Allow-Headers in preflight response. Also habe ich diesen Header entfernt. Ich bin immer noch bei der Fehlersuche, warum die Anfrage von einer Domäne funktioniert und nicht von der anderen. Sobald ich das herausgefunden habe, werde ich aktualisieren und als gelöst markieren./Aktualisieren

Die folgende jQuery-POST-Anfrage mit Standardauthentifizierung wie erwartet funktioniert:

var mapstory = { 
    xml: '<?xml version="1.0" encoding="UTF-8"?> <wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" service="WFS" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd"> <wfs:Update xmlns:feature="http://www.geonode.org/" typeName="geonode:dja_remote_service_edit_test"><ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:FeatureId fid="garbage_id" /></ogc:Filter></wfs:Update></wfs:Transaction>', 
    url: 'https://demo.mapstory.org/geoserver/wfs/WfsDispatcher', 
    auth: authToken //base64 encoded string of 'user:password' 
}; 

$.ajax({ 
    url: mapstory.url, 
    beforeSend: function(xhr) { 
    xhr.setRequestHeader("Authorization", "Basic " + mapstory.auth); 
    }, 
    type: 'POST', 
    contentType: 'text/html', 
    dataType: 'xml', 
    processData: false, 
    data: mapstory.xml, 
    success: function(data) { 
    console.log(data); 
    } 
}); 

die Response-Header sind hier:

Access-Control-Allow-Credentials: true 
Access-Control-Allow-Headers: Origin,Content-Type,Accept, Authorization, x-requested-with 
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE 
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS 
Connection: keep-alive 
Content-Length: 0 
Date: Fri, 01 Jul 2016 21:06:50 GMT 
Server: nginx 
access-control-allow-origin: http://localhost:8888 

jedoch doesn folgenden in AngularJS (v1.2.21) 't Arbeit:

var mapstory = { 
    xml: '<?xml version="1.0" encoding="UTF-8"?> <wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" service="WFS" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd"> <wfs:Update xmlns:feature="http://www.geonode.org/" typeName="geonode:dja_remote_service_edit_test"><ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:FeatureId fid="garbage_id" /></ogc:Filter></wfs:Update></wfs:Transaction>', 
    url: 'https://demo.mapstory.org/geoserver/wfs/WfsDispatcher', 
    auth: authToken //base64 encoded string of 'user:password' 
}; 

var config = { 
    withCredentials: true 
}; 

config.headers = { 
    'Authorization': 'Basic ' + mapstory.auth, 
    'Content-Type': 'text/html', 
    'Data-Type': 'xml' 
}; 

$http.post(mapstory.url, mapstory.xml, config) 
.success(function(data) { 
    console.log(data); 
}); 

Ich erhalte die folgenden Antwortheader von diesem Re Suche:

Content-Language: en 
Content-Type: text/xml;charset=UTF-8 
Date: Fri, 01 Jul 2016 20:52:13 GMT 
Server: WSGIServer/0.1 Python/2.7.11 
Vary: Accept-Language, Cookie 
X-Frame-Options: SAMEORIGIN 

Ich erhalte eine gültige XML-Antwort von dem Winkel Anfrage oben, aber die Antwort anzeigt, dass die Anforderung autorisiert wurde nicht.

Ich versuchte, den Wert Content-Type mit application/xml auszutauschen, aber das hatte keine Auswirkungen auf das Ergebnis.

Ich habe durch die Angular $ http Dokumentation gelesen und näherte sich einer Reihe anderer Ressourcen, wie this Stack Overflow question, die ein ähnliches Problem beschreibt. Eine empfohlene Lösung besteht darin, die Standardkopfzeile X-Requested-With zu entfernen. Dieser Schritt ist offensichtlich nicht notwendig in Angular Versionen über 1.2 (here's ein geschlossenes Problem für das auf Angulars Github), aber ich habe es trotzdem versucht. Kein Glück.

Jede Anleitung dazu wäre wunderbar. Vielen Dank sehr viel für die Zeit nehmen, um dies zu lesen und zu betrachten!

Answer 1

Es sieht so aus, als ob der Server angular nicht als dieselbe Domänenanwendung erkennt. Sie müssen also in die Header des Webservers den folgenden Wert eingeben: access-control-allow-origin: * um Anfragen von "externen" Domains zu erlauben.