AngularJS entdeckt nicht Access-Control-Allow-Origin-Header?

Ich bin mit einem Winkel-app auf einem lokalen virtualhost (http://foo.app:8000). Es ist eine Anfrage an einen anderen lokalen Host (http://bar.app:8000) mit $http.post.

$http.post('http://bar.app:8000/mobile/reply', reply, {withCredentials: true});

In den Netzwerk-tab von Chrome Developer Tools, die ich natürlich sehen die OPTIONS-Anfrage, und die Antwort enthält die header:

Access-Control-Allow-Origin: http://foo.app:8000

Jedoch, die die POST-Anforderung wird abgebrochen mit der folgenden Fehlermeldung:

Kein 'Access-Control-Allow-Origin' - header vorhanden ist, auf die angeforderte Ressource. Herkunft 'http://foo.app:8000' ist daher nicht der Zugriff erlaubt.

Hat jemand Erfahrung? Die Access-Control-Allow-Origin header ist sehr klar enthalten in der Antwort des OPTIONS-Anfrage, also ich kann nicht für das Leben von mir herauszufinden, warum die POST handelt, der header fehlte.

Access-Control-Allow-Credentials auch true.

InformationsquelleAutor der Frage TaylorOtwell | 2014-01-13

  1. 46

    Ist es ein bug in chrome für lokale dev. Versuchen Sie andere browser. Dann werde es funktionieren.

    InformationsquelleAutor der Antwort user1469734

  2. 26

    Gibt es einen workaround für diejenigen, die Chrome verwenden. Diese Erweiterung können Sie Anfragen, Website mit AJAX aus einer beliebigen Quelle, da es fügt 'Access-Control-Allow-Origin: *' - header der Antwort.

    Als alternative, können Sie dieses argument, um Ihre Chrome-launcher: --disable-web-security. Beachten Sie, dass ich nur für Entwicklungszwecke gedacht, nicht für normale "web-surfen". Für Referenz sehen Ausführung Chrom mit Fahnen.

    Als ein letzter Hinweis, durch die Installation der extension erwähnt auf dem ersten Absatz, können Sie ganz einfach zu aktivieren/deaktivieren CORS.

    InformationsquelleAutor der Antwort Rui Afonso Pereira

  3. 7

    War ich das senden von Anfragen von angularjs mit $http-service zu Flasche läuft auf http://localhost:8090/ und ich hatte zu gelten CORS sonst bekam ich Anfrage Fehler wie "Keine" Access-Control-Allow-Origin' - header vorhanden ist, auf die angeforderte Ressource"

    from bottle import hook, route, run, request, abort, response

#https://github.com/defnull/bottle/blob/master/docs/recipes.rst#using-the-hooks-plugin

@hook('after_request')
def enable_cors():
    response.headers['Access-Control-Allow-Origin'] = '*'
    response.headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS, PUT'
    response.headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept'

    InformationsquelleAutor der Antwort Gabriel

  4. 3

    Habe ich das exakt gleiche Problem. Für mich, die OPTIONS-Anforderung würde durch zu gehen, aber die POST-Anforderung würde sagen, "abgebrochen." Dies führte mich zu glauben, dass der browser war nie was die POST-Anforderung an alle. Chrome sagte etwas wie "Vorsicht provisorischen Header angezeigt werden" im request-Header, aber keine Antwort-Header gezeigt wurden. Am Ende drehte ich mich um debugging in Firefox, die mich führte, um herauszufinden, mein server reagiert mit einer Fehlermeldung und keine CORS-Header vorhanden waren auf die Antwort. Chrome war eigentlich das empfangen der Antwort, aber nicht so die Reaktion gezeigt werden, die in der Netzwerk-Ansicht.

    InformationsquelleAutor der Antwort brain_bacon

  5. 3

    CROS der behoben werden muss von der server-Seite.

    Filter erstellen, die wie pro Anforderung auf Zugriff zulassen, und fügen Sie Filter in web.xml

    Beispiel mit spring:

    Filterklasse:

    @Component
public class SimpleFilter implements Filter {

@Override
public void init(FilterConfig arg0) throws ServletException {}

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

    HttpServletResponse response=(HttpServletResponse) resp;

    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with");

    chain.doFilter(req, resp);
}

@Override
public void destroy() {}

}

    Web.xml:

    <filter>
    <filter-name>simpleCORSFilter</filter-name>
    <filter-class>
        com.abc.web.controller.general.SimpleFilter
    </filter-class>
</filter>
<filter-mapping>
    <filter-name>simpleCORSFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

    InformationsquelleAutor der Antwort nkharche

  6. 2

    Ich lief in dieses problem heute. Es stellte sich heraus, dass ein Fehler auf dem server (null pointer exception) verursacht einen Fehler bei der Erstellung einer Antwort, doch ist es immer noch erzeugt einen HTTP-status-code 200. Da der Statuscode 200, Chrom erwartet Sie eine gültige Antwort. Die erste Sache, die Chrome gemacht hat, war der Blick für die "Access-Control-Allow-Origin' - header, die es nicht zu finden. Chrome dann storniert den Antrag und die Winkel gab mir eine Fehlermeldung. Der Fehler bei der Verarbeitung der POST-Anforderung ist der Grund, warum die OPTIONEN gelingen würde, aber der POST würde scheitern.

    Kurz gesagt, wenn Sie diese Fehlermeldung sehen, kann es sein, dass dein server nicht wieder alle Header auf alle in Reaktion auf die POST-Anfrage.

    InformationsquelleAutor der Antwort David Hansen

  7. 2

    Es kann auch passieren, wenn deine Parameter sind falsch in der Anfrage. In meinem Fall arbeitete ich mit einer API, die mir die Nachricht geschickt hat

    "Nein" Access-Control-Allow-Origin' - header vorhanden ist, auf die angeforderte Ressource. Herkunft 'null' ist daher nicht der Zugriff erlaubt. Die Antwort hatte Sie den HTTP-status-code 401."

    wenn ich senden falsche Benutzername oder das Passwort mit der POST-Anforderung zur Anmeldung.

    InformationsquelleAutor der Antwort tacticurv

  8. 2

    Anstatt $http.Holen Sie sich('abc/xyz/getSomething') versuchen
    $http.jsonp('abc/xyz/getSomething')

         return{
            getList:function(){
                return $http.jsonp('http://localhost:8080/getNames');
            }
        }

    InformationsquelleAutor der Antwort Indranil Acharya

Schreibe einen Kommentar