Laravel 5.5とAngular 4はクッキーを設定しました

Question

私はlestvelをホームステード（mydomain.testで実装されています）と角度4をfrontend（これはhttp://localhost:4200で実装されています）として使用しましたが、今はバックエンドからフロントエンドのブラウザ。

バックエンド・コントローラー：

return response(['access_token'=>$response['access_token'], 'expires_in' => $response['expires_in']]) 
      ->withCookie($cookie); 

と応答は次のとおりです。

Access-Control-Allow-Origin:* 
Cache-Control:no-cache, private 
Connection:keep-alive 
Content-Type:application/json 
Date:Sat, 30 Dec 2017 09:01:11 GMT 
Server:nginx/1.11.9 
Set-Cookie:refreshToken=def50200b16fb4563dfa726245a813985f300394fcce058b32138d85d62791e53869049c4dc71358e5789fb267457313e295f43b4f8dc8a5c4a22b03577ef77fb114f71fe17dbad637fc07105cbc67f58adbc905008fb870eae6b238047c9037fdbcf2710909538b36f8432f9528d52c9afd8774fe68ebfb11d125f0951b69ede08e164a1b0f1fe1510906a30858cb1946868a7d89d2d289b27140155b4fca33bee35ce9560696e023a484412bbbf26751ca81d96c88879c6a885b0ed72cc0b0c63639df38b3f7170561c559570cd5fa8faeec89ce06ddaf073a4634dcd5d49c0c5500dc63aeec5d5ffa99c2bad4c817f454c3bfa228397f18162e6fce64790da2f138a506bc906ae944a9aee29f1aa2b49bf2189d703706b2f475588f819985ad6942312070f5c887eec3deaa0761157f3cd86f0a016f3b19a311223c9b703a89efdfd96a878330b4e7dc86b0759c91be9bd7905ed6b94fec3587528402b7; expires=Thu, 22-Aug-2019 09:01:11 GMT; Max-Age=51840000; path=/; HttpOnly 
Transfer-Encoding:chunked 
Vary:Origin 
X-RateLimit-Limit:60 
X-RateLimit-Remaining:59 

が、私はバックエンドにフロントエンドからクッキーを送信する場合、それは動作しません！私は、角度4を使用：

refreshToken(){ 

const headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded', 'Authorization': 'Bearer ' + this.getToken()}) 
let options = new RequestOptions({ headers: headers, withCredentials: true }); 

return this.http.post(API_DOMAIN + 'refresh', JSON.stringify({}), options) 
    .map(
    (response) => { 
     console.log(response.json()); 
     return response.json() 
    }, 
) 
} 

とバックエンド側：

$refreshToken = $request->cookie(self::REFRESH_TOKEN); 
var_dump($refreshToken); // to be null always 

は、あなたは私がこれらの問題を解決するのに役立つことはできますか？

Answer 1

私はこの問題を次のように解決しました： Angular appのルートにproxy.conf.jsonを作成します。内部のルートを持つオブジェクトを置く：

{ 
    "/api": { 
    "target": "http://mydomian.test/", 
    "secure": false 
    } 
} 

私はすべての私のバックエンドのURIはapi.php内にあるため、ここで定義された/ APIを持っています。 http://localhost:4200/api/someitems/1のようなすべてのコールはhttp://mydomian.test/api/someitems/1にプロキシされます。 次に、package.jsonを編集して、スクリプト内のstartの値をng serve --proxy-config proxy.conf.jsonに変更します。今npm run startはプロキシで始まります。私がこのプロキシで持っていた問題は、あなたのURL（http://mydomian.test/）をIPに解決することです。単なるIPでLaravelを呼び出すと、nginxサーバーはドメイン名を受け取る必要があるため、何をすべきか分からない。 nginxは、同じIP上で複数のウェブサイトを許可するので、ドメイン名を受け取るか、ドメイン名を持たないすべての呼び出しをリダイレクトするデフォルトWebサイトを持つ必要があります。これがまだAngularのプロキシで修正されていない場合は、Laravelマシン上の/ etc/nginx/sitesに行きます。そこにmydomian.test設定ファイルがあります。それは聞いている80;そこに行を置いて、それをdefault 80を聞くように変更します。

これで、API_DOMAIN変数をhttp://localhost:4200に変更（またはすべて削除）し、CORSを無効にすることができます。