Nie można określić nagłówków na żądanie w AngularJS

Question

Mam 2 części w mojej aplikacji - Angular frontend i serwer szyn. A ponieważ są to różne domeny, żądania nie działają domyślnie. Jest w tym dużo osób, w tym stos, ale to nie działa dla mnie.

To jest moja metoda kątowego kontrolera:

$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) 

ja skomentował przekształcania danych, nie ma różnicy w odpowiedzi serwera.

I skonfigurowany app (widziałem to w jakimś wątku) tak:

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

myślę, że sprawia, że ​​wniosek nie ajax podobne (ale nie jestem pewien).

Ale w mojej prośbie nie ma nagłówków. Wszyscy w pewnym zakresie 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 

konsola Chrome:

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 

Inne nieistotne informacje: Na serwerze:

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 

Trasy jest oczywiste post "session/create". I kontroler sesji:

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

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

Używam najnowszej wersji kątowej 1.2.0.rc-2. this is my project on github

Answer 1

Połączysz nagłówek żądania i odpowiedzi w swoim przykładzie.

Podczas wykonywania żądania krzyżowego (CORS) i chcesz zrobić coś innego niż zwykły GET - na przykład POST lub dodanie niestandardowych nagłówków - przeglądarka najpierw wykona żądanie OPTIONS. To jest to, co można zobaczyć w konsoli programisty:

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

Następnie serwer należy dodać odpowiednie nagłówki z odpowiedzią na żądanie OPTIONS.

Dzięki temu możesz usunąć niestandardowe nagłówki z połączenia Angular. Następnie musisz upewnić się, że twój serwer/aplikacja odpowiada na żądanie OPTIONS, a nie zwraca 404.