it-swarm.com.de

CORS-Problem beim Aufruf von localhost REST Service von Angularjs

Ich lerne angleJS und versuche es in meiner Anwendung zu implementieren.

Ich habe einen RESTful-WCF-Dienst, der auf localhost IIS gehostet wird . Er hat eine GET-Methode zum Abrufen einer Liste von Dokumenten definiert: http: // localhost: 70/DocumentRESTService.svc/GetDocuments/

Jetzt versuche ich, diesen Dienst in meiner eckigen App zu verbrauchen und die Daten anzuzeigen Nachfolgend der Code: HTML:

<html>
    <script src="../../dist/js/angular/angular.min.js"></script>
    <script src="../../assets/js/one.js"></script>
    <body ng-app="myoneapp" ng-controller="oneAppCtrl">
                {{"Hello" + "AngularJS"}}
        <hr>
        <h1> Response from my REST Service </h1>
        {{hashValue}}

        <hr>
        <h1> Response from w3school REST Service </h1>
        {{names}}


    </body>
</html>

JS:

angular.module('myoneapp', [])
    .controller('oneAppCtrl', function($scope,$http){
        $scope.documentValue = {};

        $http({method: 'GET',
                url: 'http://localhost:70/DocumentRESTService.svc/GetDocuments/',
                headers:
                        {
//                          'Access-Control-Allow-Origin': 'http://localhost'
                        }                   
               })
            .success(function(data){ alert('Success!'); $scope.documentValue=data;})
            .error(function(data){ alert('Error!'); $scope.documentValue=data; alert('Error!' + $scope.documentValue);})
            .catch(function(data){ alert('Catch!'); $scope.documentValue= data;});

        $http.get("http://www.w3schools.com/angular/customers.php")
            .success(function(response) {$scope.names = response.records;});            
});

Das seltsame Verhalten ist, dass dieser Code in IE11 einwandfrei funktioniert, während er in Chrome/Firefox nicht ausgeführt wird.

Nachfolgend die Antwort im Chrom: (für meinen REST Dienst), wohingegen der REST Dienst von w3schools einwandfrei funktioniert.

{"data": null, "status": 0, "config": {"method": "GET", "transformRequest": [null], "transformResponse": [null], "url": " http : // localhost: 70/DocumentRESTService.svc/GetDocuments/ "," headers ": {" Accept ":" application/json, text/plain, / "}}," statusText " : ""}

Konsole wird mit folgender Fehlermeldung angezeigt.

  • [Chrome-Konsole: Durch Öffnen aus Dateisystem

XMLHttpRequest kann http: // localhost: 70/DocumentRESTService.svc/GetDocuments/ nicht laden. Auf der angeforderten Ressource ist kein Header "Access-Control-Allow-Origin" vorhanden. Origin 'file: //' hat daher keinen Zugriff.

  • [Chrome-Konsole: gehostet mit Klammern]

XMLHttpRequest kann http: // localhost: 70/DocumentRESTService.svc/GetDocuments/ nicht laden. Auf der angeforderten Ressource ist kein Header "Access-Control-Allow-Origin" vorhanden. Origin ' http://127.0.0.1:55969 ' hat daher keinen Zugriff.

  • [Firefox-Konsole:]

Herkunftsübergreifende Anforderung blockiert: Dieselbe Ursprungsrichtlinie verhindert das Lesen der Remote-Ressource unter http: // localhost: 70/DocumentRESTService.svc/GetDocuments/ . Dies kann behoben werden, indem Sie die Ressource in dieselbe Domäne verschieben oder CORS aktivieren.

Die Frage hier sind wenige:

  1. Warum wird localhost oder mein Rechnername als domänenübergreifende Anforderung betrachtet? Ich bin in der gleichen Domäne, nicht wahr?
  2. Gibt es an meinem Serviceende Änderungen, um dieses Verhalten zu aktivieren? Wenn ja, wo im WCF-Service? (Basierend auf etwas, das ich hier gelesen habe)
  3. ein JSONP in diesem Fall nützlich sein? Wenn ja, wie würde ich es verwenden? Würde es mit Anfragen funktionieren, die benutzerdefinierte Kopfzeilen benötigen? (Nein, Sie sind sich nicht sicher, was es ist, aber während der Recherche finden Sie viele Antworten, die dies erwähnen. Das Lesen von Links wird hilfreich sein.)

Jede Hilfe oder Anleitung wird hilfreich sein.

P.S:

  • IDE: Klammern , wenn das wichtig ist.
  • AngularJS v1.4.3
  • Ich habe auf verschiedene stackoverflow-Fragen verwiesen, die sich auf ähnliche Probleme (CORS) beziehen, die $ resource, $ provider, $ config und einige davon betrafen, wobei einige Header gelöscht und ein Wert des Headers hinzugefügt wurde. Ich bin etwas naiv - alle Hinweise darauf werden hilfreich sein.
8
Bhramar

Ich könnte dieses Problem lösen. Einige Möglichkeiten, dies zu tun - ich schreibe alles auf, was ich versucht habe, und ihre Referenzen.

Antwort auf Frage 1.

'Why is localhost or my machineName considered to be a cross-domain request?'

wie @charlietfl erwähnt und ich recherchiert hier : Ein anderer Port oder eine andere Subdomain wird auch als Cross-Domain von Browser betrachtet.

Antwort auf Frage 2.

'Are there any changes required to do at my service end to enable this behavior?'

JA! Die Änderung ist auf dem Server selbst erforderlich. Der Server sollte auf die Anfrage mit antworten

Zugriffskontrolle-Erlaube-Herkunft: *

header. Hier könnte das * durch den Anforderungskopf selbst oder gemäß Ihrer Anwendungsanforderung ersetzt werden. Ausgezeichnetes Blog hier Erläutern der Problemumgehung bei Verwendung von WCF REST Service. Sie müssen jeder Dienstmethode die folgenden Zeilen (Header) hinzufügen, um CORS in Ihrer zu aktivieren Service-Methoden.

WebOperationContext.Current.OutgoingResponse.Headers.Add (
"Access-Control-Allow-Origin", "*"); WebOperationContext.Current.OutgoingResponse.Headers.Add (
"Access-Control-Allow-Methods", "POST"); WebOperationContext.Current.OutgoingResponse.Headers.Add (
"Access-Control-Allow-Header", "Content-Type, Accept");

Eine Angabe hier ist sehr hilfreich, um CORS auf Server/Client zu aktivieren.

Antwort auf Frage 3.

JSONP funktioniert meistens für GET-Anfragen und ist nicht besonders empfehlenswert. Es wird daher empfohlen, CORS zu aktivieren. (Ich habe diesen Bereich nicht viel erforscht, aber Wiki & stackoverflow article hier waren sehr beschreibend).

Abgesehen davon kann zu Testzwecken eine Nice chrome Erweiterung hier hilfreich sein. Sie kann verwendet werden, um sicherzustellen, dass die Anwendung CORS-Probleme aufweist.

7
Bhramar

Ich habe viel zu lange mit CORS-Problemen zu kämpfen, die durch die Interaktion eines emulierten ionischen Projekts (lokal ausgeführt) mit einigen kleinen Node.JS-Webdiensten (ebenfalls lokal ausgeführt) verursacht wurden.

Sehen Sie sich die kurze einfache Problemumgehung an: das Chrome-Plugin AllowControlAllowOrigin.

https://chrome.google.com/webstore/search/cross%20origin?utm_source=chrome-ntp-icon&_category=extensions

Schalten Sie einfach den Radioknopf von rot auf grün und keine blockierte Anfrage, Fehler oder Warnung mehr! Natürlich ist dies eine vorübergehende Lösung, und Sie müssen möglicherweise Ihre Hände in die Anforderungsheader legen, wenn die lokalen Tests abgebrochen werden sollen. In der Zwischenzeit ist dies eine großartige Möglichkeit, um zu vermeiden, dass bei diesen lästigen, wiederkehrenden Problemen Zeit verloren geht.

4
Sendil.J

Wenn Sie in AngularJS-Anwendungen beim Zugriff auf die auf der localhost-Maschine ausgeführte REST -API auf ein CORS-Problem stoßen, überprüfen Sie Folgendes: Fügen Sie den CORS-Filter in Ihrer Serveranwendung hinzu. In meinem Fall habe ich den folgenden Code in der Spring-Anwendung hinzugefügt

import Java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

@Component
public class SimpleCORSFilter implements Filter {

private final Logger log = LoggerFactory.getLogger(SimpleCORSFilter.class);

public SimpleCORSFilter() {
    log.info("SimpleCORSFilter init");
}

@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
        throws IOException, ServletException {

    HttpServletRequest request = (HttpServletRequest) req;
    HttpServletResponse response = (HttpServletResponse) res;

    response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
    response.setHeader("Access-Control-Allow-Credentials", "true");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");

    chain.doFilter(req, res);
}

@Override
public void init(FilterConfig filterConfig) {
}

@Override
public void destroy() {
}

}

Geben Sie im Angreiferjs-Code keine URL wie http: // localhost : 8080 /../ an. Anstelle von localhost geben Sie Ihre Host-IP-Nummer ein.

Es wird richtig funktionieren

1
Suresh Selvaraj

Mein Freund . Nur tippen 

/DocumentRESTService.svc/GetDocuments
0
Julian Porras