2017-12-30 6 views
1

homestead - mydomain.test에서 구현 된 백엔드로 laravel을 사용했으며 프론트 엔드 (http://localhost:4200에서 구현 됨)로 각도 4를 사용했습니다. 이제 백엔드에서 프론트 엔드 브라우저로 쿠키를 설정하고 싶습니다. .Laravel 5.5 및 Angular 4 세트 쿠키

백엔드 컨트롤러 :

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 

하지만 백엔드 프론트 엔드에서 쿠키를 보낼 때, 그것은 작동하지 않습니다

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

및 응답입니다!

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 

당신이 날은 이러한 문제를 해결하는 데 도움이 될 수 있습니다 나는 4 각도를 사용?

답변

0

나는이 문제를 다음과 같이 해결했습니다 : 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가 proxy로 시작합니다. 이 프록시에서 내가 가진 문제점은 URL (http://mydomian.test/)을 IP로 해결한다는 것입니다. IP로 Laravel을 호출하면 nginx 서버는 도메인 이름을 받아야하기 때문에 무엇을해야할지 모릅니다. nginx는 동일한 IP상의 여러 웹 사이트를 허용하므로 도메인 이름을 수신하거나 도메인 이름이없는 모든 호출을 리디렉션하는 기본 웹 사이트를 가져야합니다. Angular의 프록시에서 여전히 고정되어 있지 않은 경우 Laravel 시스템에서/etc/nginx/sites-available으로 이동하면 mydomian.test 설정 파일이 있습니다. 그것은 들어있다 80; 거기서 줄을 긋고, 기본값 80을 듣기 위해 바꿔라.

이제 API_DOMAIN 변수를 http://localhost:4200으로 변경 (또는 모두 제거)하고 CORS를 사용 중지 할 수 있습니다.