Frage Überspringen der OPTIONS-Preflight-Anfrage in AngularJS


Ich hatte eine PhoneGap-App entwickelt, die nun in eine mobile Website umgewandelt wird. Alles funktioniert reibungslos neben einem kleinen Fehler. Ich verwende eine bestimmte API von Drittanbietern über eine POST-Anfrage, die in der App funktioniert, aber in der mobilen Website-Version fehlschlägt.

Nach näherem Hinsehen scheint AngularJS (ich glaube der Browser tatsächlich) zuerst eine OPTIONS-Anfrage zu senden. Ich habe heute viel über CORS gelernt, aber ich kann mir nicht vorstellen, wie ich es komplett deaktivieren kann. Ich habe keinen Zugriff auf diese API (Änderungen auf dieser Seite sind also nicht möglich), aber sie haben die Domäne, an der ich arbeite, zu ihrer Access-Control-Allow-Origin-Kopfzeile hinzugefügt.

Dies ist der Code, über den ich spreche:

        var request = {
                language: 'fr',
                barcodes: [
                    {
                        barcode: 'somebarcode',
                        description: 'Description goes here'
                    }
                ]
            };
        }
        var config = {
            headers: { 
                'Cache-Control': 'no-cache',
                'Content-Type': 'application/json'
            }
        };
        $http.post('http://somedomain.be/trackinginfo', request, config).success(function(data, status) {
            callback(undefined, data);
        }).error(function(data, status) {
            var err = new Error('Error message');
            err.status = status;
            callback(err);
        });

Wie kann ich verhindern, dass der Browser (oder AngularJS) diese OPTIONS-Anfrage sendet und einfach zur eigentlichen POST-Anfrage übergeht? Ich benutze AngularJS 1.2.0.

Danke im Voraus.


76
2018-04-09 16:20


Ursprung


Antworten:


Der Preflight wird von Ihrem Content-Type ausgelöst application/json. Der einfachste Weg, dies zu verhindern, besteht darin, den Inhaltstyp festzulegen text/plain in Ihrem Fall. application/x-www-form-urlencoded & multipart/form-data Content-Typen sind ebenfalls akzeptabel, aber Sie müssen Ihre Anfrage-Payload natürlich entsprechend formatieren.

Wenn nach dieser Änderung noch ein Preflight angezeigt wird, fügt Angular der Anforderung möglicherweise ebenfalls einen X-Header hinzu.


89
2018-04-09 16:35



Was Ray gesagt hat, du kannst es stoppen, indem du den Content-Header modifizierst -

 $http.defaults.headers.post["Content-Type"] = "text/plain";

Beispielsweise -

angular.module('myApp').factory('User', ['$resource','$http',
    function($resource,$http){
        $http.defaults.headers.post["Content-Type"] = "text/plain";
        return $resource(API_ENGINE_URL+'user/:userId', {}, {
            query: {method:'GET', params:{userId:'users'}, isArray:true},
            getLoggedIn:{method:'GET'}
        });
    }]);

Oder direkt zu einem Anruf -

var req = {
 method: 'POST',
 url: 'http://example.com',
 headers: {
   'Content-Type': 'text/plain'
 },
 data: { test: 'test' }
}

$http(req).then(function(){...}, function(){...});

Dies wird keine Anfrage vor dem Flug senden.

HINWEIS: Die Anfrage sollte keinen benutzerdefinierten Header-Parameter haben. Wenn der Anfrage-Header irgendeinen benutzerdefinierten Header enthält, dann wird der Browser eine Pre-Flight-Anfrage machen, die Sie nicht vermeiden können.


12
2017-11-30 05:00



Ich denke, der beste Weg ist zu überprüfen, ob die Anfrage vom Typ "OPTIONS" ist, 200 von der Middleware zurückzugeben. Es hat für mich funktioniert.

express.use('*',(req,res,next) =>{
      if (req.method == "OPTIONS") {
        res.status(200);
        res.send();
      }else{
        next();
      }
    });

2
2017-10-20 23:54



Bei der Ausführung bestimmter Arten domainübergreifender AJAX-Anforderungen fügen moderne Browser, die CORS unterstützen, eine zusätzliche "Preflight" -Anfrage ein, um festzustellen, ob sie die Berechtigung zum Ausführen der Aktion besitzen. Aus der Beispielabfrage:

$http.get( ‘https://example.com/api/v1/users/’ +userId,
  {params:{
           apiKey:’34d1e55e4b02e56a67b0b66’
          }
  } 
);

Als Ergebnis dieses Fragments können wir sehen, dass die Adresse zwei Anfragen gesendet wurde (OPTIONS und GET). Die Antwort vom Server enthält Header, die die Zulässigkeit der Abfrage GET bestätigen. Wenn Ihr Server nicht für die ordnungsgemäße Verarbeitung einer OPTIONS-Anforderung konfiguriert ist, schlagen Clientanforderungen fehl. Beispielsweise:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: accept, origin, x-requested-with, content-type
Access-Control-Allow-Methods: DELETE
Access-Control-Allow-Methods: OPTIONS
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Methods: GET
Access-Control-Allow-Methods: POST
Access-Control-Allow-Orgin: *
Access-Control-Max-Age: 172800
Allow: PUT
Allow: OPTIONS
Allow: POST
Allow: DELETE
Allow: GET

0
2018-03-18 14:10



Wenn der content-type auf undefined gesetzt wird, würde Javascript die Header-Daten übergeben. Wie es ist, und über das Schreiben der standardmäßigen eckigen $ httpProvider Header-Konfigurationen. Angular $ http Dokumentation

$http({url:url,method:"POST", headers:{'Content-Type':undefined}).then(success,failure);

-1
2018-06-17 12:23