AngularJSのリクエストでヘッダーを指定することはできません

Question

私のアプリには2つの部分があります - 角度のあるフロントエンドとレールサーバー。ドメインが異なるため、要求はデフォルトでは機能しません。スタックについては、スタッフにはたくさんのスタッフがいるが、それは私にとってはうまくいかない。

これは角コントローラの私の方法です：

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

私はデータを変換コメントし、サーバの応答に違いはありません。私はそれが要求は以下のようにAJAXないなります（私はよく分からない）と思い

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

：

そして、私はそのようなアプリを（いくつかの記事でこれを見た）ように構成しました。

私の要求にヘッダーはありません。いくつかのフィールド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 

クロームコンソール：

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 

その他の無意味な情報：サーバー上 ：

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 

ルートはpost "session/create"明らかです。セッションコントローラ：

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

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

最新の角度1.2.0.rc-2を使用しています。 this is my project on github

Answer 1

この例では、リクエストヘッダーと応答ヘッダーが混在しています。

クロスドメインリクエスト（CORS）を実行しているときに、プレーンGETと異なるものを作成する場合（POSTやカスタムヘッダーの追加など）は、まずOPTIONSリクエストを行います。 これは、あなたのデベロッパーコンソールで見たものである。

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

サーバはその後、OPTIONS要求の応答に適切なヘッダを追加する必要があります。

角型コールからカスタムヘッダーを削除することができます。 次に、サーバ/アプリケーションが404を返さずにOPTIONSリクエストに応答することを確認する必要があります。