14

AngularJS フロントエンド アプリケーションのデータを返す Rails サービスがあります。サービスは、適切なヘッダーを返すことによって CORS 要求を許可するように構成されています。

データを受信するために GET リクエストを行うと、CORS ヘッダーが送信され、ログイン時に以前に受信したセッション cookie が送信されます。

Request URL:http://10.211.194.121:3000/valoradores
Request Method:GET
Status Code:200 OK

Request Headers
Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Cookie:_gestisol_session=BAh7B0kiDHVzZXJfaWQGOgZFRmkASSIPc2Vzc2lvbl9pZAY7AEZJIiVmYTg3YTIxMjcxZWMxNjZiMjBmYWZiODM1ODQzMjZkYQY7AFQ%3D--df348feea08d39cbc9c817e49770e17e8f10b375
Host:10.211.194.121:3000
Origin:http://10.211.194.121:8999
Pragma:no-cache
Referer:http://10.211.194.121:8999/
User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
X-Requested-With:XMLHttpRequest

Response Headers
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:X-Requested-With,X-Prototype-Version,Content-Type,Cache-Control,Pragma,Origin
Access-Control-Allow-Methods:GET,POST,OPTIONS
Access-Control-Allow-Origin:http://10.211.194.121:8999
Access-Control-Max-Age:1728000
Cache-Control:max-age=0, private, must-revalidate
Connection:Keep-Alive
Content-Length:5389
Content-Type:application/json; charset=utf-8
Date:Mon, 04 Nov 2013 14:30:51 GMT
Etag:"2470d69bf6db243fbb337a5fb3543bb8"
Server:WEBrick/1.3.1 (Ruby/1.9.3/2011-10-30)
X-Request-Id:15027b3d323ad0adef7e06103e5aa3a7
X-Runtime:0.017379
X-Ua-Compatible:IE=Edge

すべてが正しく、データを取り戻しました。

しかし、POST 要求を行うと、CORS ヘッダーもセッション cookie も要求と共に送信されず、セッション ID がないため、サーバーで POST がキャンセルされます。リクエストのヘッダーは次のとおりです。

Request URL:http://10.211.194.121:3000/valoraciones

Request Headers
Accept:application/json, text/plain, */*
Cache-Control:no-cache
Content-Type:application/json;charset=UTF-8
Origin:http://10.211.194.121:8999
Pragma:no-cache
Referer:http://10.211.194.121:8999/
User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
X-Requested-With:XMLHttpRequest

Request Payload
{valoracione:{revisiones_id:1, valoradores_id:1}}
valoracione: {revisiones_id:1, valoradores_id:1}

要求にセッション Cookie が含まれていないため、サービスは 403 で応答します。

$resource は他のものと同じように構成されており、資格情報を送信する $httpProvider のデフォルトを定義しているため、POST 要求が失敗する理由はわかりません (GET 要求が成功すると正しく機能します)。

  .config(['$httpProvider', function($httpProvider) {
     $httpProvider.defaults.withCredentials = true;
    }])

これは、インスタンスで $save() を呼び出したときに失敗するリソースです。

'use strict';

angular.module('gestisolApp')
  .service('ValoracionesService', ['$resource', 'API_BASE_URL', function ValoracionesService($resource, API_BASE_URL) {
    this.valoraciones = $resource(API_BASE_URL + '/valoraciones');
  }]);

そして、これは query() 呼び出しで成功するサービスです:

'use strict';

angular.module('gestisolApp')
  .service('ValoradoresService', ['$resource', 'API_BASE_URL', function ValoradoresService($resource, API_BASE_URL) {
    this.valoradores = $resource(API_BASE_URL + '/valoradores');
  }]);

それらはほとんど同じです。

セッション Cookie なしで POST が送信される理由を知っている人はいますか?

編集

情報を完成させるために、プリフライトは次の方法で処理され、失敗した POST の前の要求は 200 応答コードで成功する OPTIONS であるため、正常に処理されます。

def cors_preflight_check
        headers['Access-Control-Allow-Origin'] = 'http://10.211.194.121:8999'
        headers['Access-Control-Allow-Methods'] = 'GET,POST,OPTIONS'
        headers['Access-Control-Allow-Headers'] = 'X-Requested-With,X-Prototype-Version,Content-Type,Cache-Control,Pragma,Origin'
        headers['Access-Control-Allow-Credentials'] = 'true'
        headers['Access-Control-Max-Age'] = '1728000'
        render :nothing => true, :status => 200, :content_type => 'text/html'
end

これは、失敗した POST の前の CORS OPTIONS 要求/応答交換です。

Request URL:http://10.211.194.121:3000/valoraciones
Request Method:OPTIONS
Status Code:200 OK

Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, x-requested-with, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:10.211.194.121:3000
Origin:http://10.211.194.121:8999
Referer:http://10.211.194.121:8999/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36

Response Headers
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:X-Requested-With,X-Prototype-Version,Content-Type,Cache-Control,Pragma,Origin
Access-Control-Allow-Methods:GET,POST,OPTIONS
Access-Control-Allow-Origin:http://10.211.194.121:8999
Access-Control-Max-Age:1728000
Cache-Control:max-age=0, private, must-revalidate
Connection:Keep-Alive
Content-Length:1
Content-Type:text/html; charset=utf-8
Date:Mon, 04 Nov 2013 15:57:38 GMT
Etag:"7215ee9c7d9dc229d2921a40e899ec5f"
Server:WEBrick/1.3.1 (Ruby/1.9.3/2011-10-30)
X-Request-Id:6aa5bb4359d54ab5bfd169e530720fa9
X-Runtime:0.003851
X-Ua-Compatible:IE=Edge

編集2：私の問題を明確に反映するようにタイトルを変更しました

4

3 に答える 3

15

同様の問題があり、Angular $http CORS リクエストが問題を解決する前に以下を追加しました。$http.defaults.withCredentials = true;

詳細については、 https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Requests_with_credentialsを参照してください。

于 2013-11-05T08:08:49.240 に答える
5

CORS が関係している場合、ブラウザは POST リクエストの前に OPTIONS リクエストを送信します。

Rails の詳細はわかりませんが、適切な CORS ヘッダーを使用して OPTIONS リクエストに実際に応答するように Rails を構成する必要があると思います。

次のコードは比較用です。Java で問題に対処する方法を示しています。

public void doOptions(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.setHeader("Access-Control-Allow-Origin", "http://10.211.194.121:8999");
    resp.setHeader("Access-Control-Allow-Credentials", "true");
    resp.setHeader("Access-Control-Allow-Methods", "OPTIONS, POST, GET");
    resp.setHeader("Access-Control-Allow-Headers", "X-Requested-With,X-Prototype-Version,Content-Type,Cache-Control,Pragma,Origin");
    resp.setHeader("Access-Control-Max-Age", "600");
    resp.setHeader("Access-Control-Expose-Headers","Access-Control-Allow-Origin");
    super.doOptions(req, resp);
}

しかし、Rails での構成方法を正しく理解できるかもしれません。

于 2013-11-04T15:19:22.757 に答える
2

わかりました、ついに私は何が起こっているのかを理解しました。

この質問に投稿された回答により、Cookie から HttpOnly パラメータを削除し、Firefox で動作するようにしました。後でChromeの場合、Cookieのドメインを設定するなど、回答から残りの推奨事項を適用して機能させるだけでした。

于 2013-11-05T07:50:29.197 に答える