8

私のアプリには、Angular フロントエンドと Rails サーバーの 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)

データの変換についてコメントしましたが、サーバーの応答に違いはありません。

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

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

それはリクエストをajaxのようにしないと思います（しかし、よくわかりません）。

しかし、私のリクエストにはヘッダーがありません。それらはすべていくつかのフィールドにあります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 コンソール:

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

angular 1.2.0.rc-2 の最新バージョンを使用しています。これはgithubの私のプロジェクトです

4

1 に答える 1

7

この例では、リクエスト ヘッダーとレスポンス ヘッダーを混同しています。

クロス ドメイン リクエスト (CORS) を実行していて、プレーンな GET とは異なるものを作成する場合 (たとえば、POST やカスタム ヘッダーの追加など)、ブラウザーは最初に OPTIONS リクエストを作成します。開発者コンソールには次のように表示されます。

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

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

したがって、Angular 呼び出しからカスタム ヘッダーを削除できます。次に、サーバー/アプリケーションが OPTIONS リクエストに応答し、404 を返さないことを確認する必要があります。

于 2013-10-08T14:13:41.187 に答える