Kann keine Header in Anfrage in AngularJS angeben

Question

Ich habe 2 Teile in meiner App - Angular Frontend und Rails Server. Da es sich um unterschiedliche Domänen handelt, funktionieren Anforderungen standardmäßig nicht. Es gibt eine Menge Leute, einschließlich Stack, aber es funktioniert nicht für mich.

Das ist mein Verfahren in Winkelregler ist:

$scope.test =-> 
    # transform = (data) -> 
    # $.param data 

    $http.post('http://localhost:3000/session/create', 'token=some', 
    headers: 
     'Access-Control-Allow-Origin': 'http://localhost:9000', 
     'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', 
     'Access-Control-Allow-Headers': 'Content-Type, X-Requested-With' 
    # transformRequest: transform 
).success (responseData) -> 
    console.log(responseData) 

kommentierte ich Daten umwandeln, gibt es keinen Unterschied in der Serverantwort.

Und ich konfiguriert app (sah dies in einigen post) wie folgt aus:

.config ["$httpProvider", ($httpProvider) -> 
    $httpProvider.defaults.useXDomain = true 
    delete $httpProvider.defaults.headers.common["X-Requested-With"] 
] 

Ich denke, das macht wie Anfrage nicht ajax (aber ich bin nicht sicher).

Aber es gibt keine Header in meiner Anfrage. Sie sind alle in einem Feld Access-Control-Request-Headers:access-control-allow-origin, accept, access-control-allow-headers, access-control-allow-methods, content-type:

Request URL:http://localhost:3000/session/create 
    Request Method:OPTIONS 
    Status Code:404 Not Found 

    Request Headers 

    Accept:*/* 
    Accept-Encoding:gzip,deflate,sdch 
    Accept-Language:en-US,en;q=0.8,ru;q=0.6 
    Access-Control-Request-Headers:access-control-allow-origin, accept, access-control-allow-headers, access-control-allow-methods, content-type 
    Access-Control-Request-Method:POST 
    Connection:keep-alive 
    DNT:1 
    Host:localhost:3000 
    Origin:http://localhost:9000 
    Referer:http://localhost:9000/ 
    User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.8 Safari/537.36 

    Response Headers 

    Content-Length:12365 
    Content-Type:text/html; charset=utf-8 
    X-Request-Id:2cf4b37b-eb47-432a-ab30-b802b3e33218 
    X-Runtime:0.030128 

Chrome Konsole:

OPTIONS http://localhost:3000/session/create 404 (Not Found) angular.js:6730 
OPTIONS http://localhost:3000/session/create No 'Access-Control-Allow-Origin' header is  present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. angular.js:6730 
XMLHttpRequest cannot load http://localhost:3000/session/create. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. localhost/:1 

Andere unbedeutenden Informationen: Auf dem Server:

class ApplicationController < ActionController::Base 
    before_filter :allow_cross_domain_access 

    protected 

    def allow_cross_domain_access 
    headers['Access-Control-Allow-Origin'] = '*'# http://localhost:9000 
    headers['Access-Control-Allow-Headers'] = 'GET, POST, PUT, DELETE' 
    headers['Access-Control-Allow-Methods'] = %w{Origin Accept Content-Type X-Requested-With X-CSRF-Token}.join(',') 
    headers['Access-Control-Max-Age'] = '1728000' 

    end 
end 

Routes ist offensichtlich post "session/create". Und Session-Controller:

class SessionController < ApplicationController 
    respond_to :json, :html, :js 

    def create 
    respond_with "logged in" 
    # render nothing: true 
    end 
end 

Ich benutze die neueste Version von eckigen 1.2.0.rc-2. this is my project on github

Answer 1

Sie verwechseln die Anforderungs- und Antwortheader in Ihrem Beispiel.

Wenn Sie eine Cross-Domain-Anfrage (CORS) durchführen und etwas anderes als ein einfaches GET machen wollen - also zum Beispiel einen POST oder benutzerdefinierte Header hinzufügen - wird der Browser zuerst eine OPTIONS-Anfrage stellen. Dies ist, was Sie in Ihrer Entwicklerkonsole sehen:

OPTIONS http://localhost:3000/session/create 404 (Not Found) angular.js:6730 

Der Server dann sollten die entsprechenden Header auf die Antwort des Antrags Optionen.

Sie können also die benutzerdefinierten Header aus dem Angular-Aufruf entfernen. Als nächstes müssen Sie sicherstellen, dass Ihr Server/Ihre Anwendung die OPTIONS-Anfrage beantwortet und keine 404 zurückgibt.