レスポンスヘッダーのセットクッキーがブラウザで作成されていない - HTTP POSTを使用

Question

私はこのようなクッキーに関する問題を抱えています。

私のシナリオはこれです：（：5555 localhostの）

私は私の角度2アプリが別のサーバ上で実行されている

：（12456 localhst）

• 私は、サーバー上の私のバックエンドを持っています私のバックエンドは単なるASP.NETアプリケーションで、私はapiControllerからユーザーを認証しようとしています。 APIコントローラは、このようなものです：今

  [System.Web.Mvc.HttpPost] 
       public HttpResponseMessage HandleLogin([FromBody] LoginModel loginModel) 
       { 
        if (!String.IsNullOrEmpty(loginModel.Username) && !String.IsNullOrEmpty(loginModel.Password)) 
        { 
  
         if (Members.Login(loginModel.Username, loginModel.Password)) 
         { 
          var resp = Request.CreateResponse<UserAuthenticationModel>(
           HttpStatusCode.OK, 
           new UserAuthenticationModel() { IsAuthenticated = true} 
          ); 
  
          //create and set cookie in response 
          var cookie = new CookieHeaderValue("customCookie", "cookieVal"); 
          cookie.Expires = DateTimeOffset.Now.AddDays(1); 
          cookie.Domain = Request.RequestUri.Host; 
          cookie.Path = "/"; 
          resp.Headers.AddCookies(new CookieHeaderValue[] { cookie }); 
  
          return resp; 
         } 
        } 
  
        return Request.CreateResponse<UserAuthenticationModel>(
          new UserAuthenticationModel() { IsAuthenticated = false } 
        ); 
       } 
  

  、私の角度のアプリから、私は、httpポストを呼び出しています：

  headers.append（ 'とAccess-Control-Allow-Credentials'、true）を、

  return this._http.post(this._globalVariables.BACKEND_API_HANDLE_LOGIN, loginModel, {headers: headers}) 
         .map((response : Response) => response); 
  

  this._loginService.getLoginModel（） .subscribe（ loginModel => this._signInPageModel = loginModel、 誤差=>にconsole.log（エラー） ）。 私のapiコントローラメソッド（HandleLogin）では、テストCookieとFormsAuthentication用のCookieがあります。ユーザーが正常にログインして角型アプリケーションに戻ると、クッキーは作成されません。

  さて、クッキーは私のレスポンスヘッダのポストとしてだけでなく見ることができます。

  

  私はそれについて非常に混乱してるし、正常にログインプロセスを取得するために、任意の助けに感謝します。

  ありがとうございます。

Answer 1

私は同じ問題で一日を無駄にしました。私が見つけたことは、これらが重要なビットであることです。

1.サーバーに次のヘッダーを追加する必要があります。（クライアントのホストアドレスで置き換えてください）。これらは、CORSに必要です。これは、2つのサイトが異なるポート番号を使用しているため必要です。 WebAPIのために

Access-Control-Allow-Origin: http://localhost:5555 
Access-Control-Allow-Credentials: true 

、これはWebApiConfig.Registerの先頭に次の権利を置くことを意味します

：

var cors = new EnableCorsAttribute("http://localhost:5555", "*", "GET,POST"); 
cors.SupportsCredentials = true; 
config.EnableCors(cors); 

2.あなたがあなたのクッキーこれらの

ルックを設定する方法については正確です

response.Headers.AddCookies(new CookieHeaderValue[] 
{ 
    new CookieHeaderValue("WorkingCookie", cookieValue) { Path="/" }, 
    new CookieHeaderValue("NotWorkingCookie", cookieValue) 
}); 

パスを指定せずに動作するCORSクッキー。また、this SO answerは、実稼働環境ではドメインも指定する必要があると主張しています。私はまだそこにはいないので、私はただそれについて今注目しているだけです。

3。バックエンドの制限に注意してください

私が知っているWeb APIには問題はありませんが、PHP用に複数のSet-Cookieヘッダーがうまく機能しません。私はクライアントに永続化されるようにリストされた最後のものしか得ることができませんでした。 withCredentialsは、オプションの一部として渡されて

return this._http.post(this._globalVariables.BACKEND_API_HANDLE_LOGIN, 
    loginModel, {headers: headers, withCredentials: true}) 
    .map((response : Response) => response); 

注：お使いのHTTPリクエストに

4.使用withCredentials *

これは、以前に記載されているお電話での私の感想です。

これはあなたの欠けている部分であり、絶対に重要です。その他の手順では、クッキーがサーバーによって正しく送信され、ブラウザによって永続化されるようにしますが、withCredentialsはwhether the browser will include its cookies in the request headerを管理します。

Angularの新しいバージョンを使用していることを確認してください。一部のRCバージョンでもフラットアウトはwithCredentialsオプションを無視しているため、CORSコールではまったく使用できませんでした。

決勝ノート クッキーとCORS認証システムを作成する場合は、そこの世話をするために2つの追加のものです：

1. マークのWeb APIにセッションクッキーHttpOnlyが、それはないかもしれません注入されたJavaScriptによって改ざんされました。
2. サーバーサイドで、XSRF-TOKENという名前の（HttpOnly）クッキーで返されたキーを生成して保存します。各API呼び出しで、この格納された値と、Angularが返すX-XSRF-TOKENヘッダーの値を比較します。これはCSRF attacksから保護するために必要です。