Почему не устанавливаются куки при post запросе в Angular 5?

Question

[Александр Михайленко]

Добрый день, делаю проект, АПИ отдельно, фронт часть на ангуляре отдельно.
Все на локалке.

делаю запрол с ангуляра, и по апи получаю ответ, но при этот кука в браузер не устанавливается, в разделе cookie в dev tools. Хотя она существует и обратно отправляется. Как её вытащить можно в код ?

вот такой запрос с фронта

const httpOptions = {
            withCredentials: true,
            headers: new HttpHeaders({
                'Content-Type': 'application/json',
            }),
        };


        const login = this.http.post('http://api/dashboard/login', body, httpOptions);

        login.subscribe(
            (response: HttpResponse) => {
                this.doSomething(response);
            }, (err) => {
                console.log('Error: ' + err);
            });

на сервере настроен заголовки в htaccess таким образом

Header set X-Content-Type-Options "nosniff"
  Header set X-XSS-Protection "1; mode=block"
  Header always set Access-Control-Max-Age 1728000
  Header always set Access-Control-Allow-Origin: "http://localhost:4200"
  Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
  Header always set Access-Control-Allow-Headers: "Content-Type, Range, Origin, X-Requested-With,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control, Cache ,set-cookie,cookie, dashboard_token, token
  Header always set Access-Control-Allow-Credentials true

ответ от сервера

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, Range, Origin, X-Requested-With,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control, Cache ,set-cookie,cookie, dashboard_token, token
Access-Control-Allow-Methods: GET,POST,OPTIONS,DELETE,PUT
Access-Control-Allow-Origin: http://localhost:4200
Access-Control-Max-Age: 1728000
Connection: Keep-Alive
Content-Length: 121
Content-Type: application/json;charset=utf-8
Date: Fri, 08 Jun 2018 14:14:24 GMT
Keep-Alive: timeout=10, max=100
Server: Apache
Set-Cookie: dashboard_token=20338a95cb18498b17de9119792cd277; path=; expires=Fri, 15-Jun-2018 14:14:24 UTC
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block

Answer 1

[Антон]

Домены-то походу разные, ангуляр на localhost:4200 сидит, а апишка на api
Вообще сам недавно узнал про проксирование запросов ангуляра на другие домены/порты - https://github.com/angular/angular-cli/blob/master...
у меня вот такой конфиг (proxy.conf.json)

{
  "/data/**": {
    "target": "http://booking.localhost/",
    "logLevel": "debug",
    "changeOrigin": true
  },
  "/login": {
    "target": "http://booking.localhost/",
    "logLevel": "debug",
    "changeOrigin": true
  },
  "/logout": {
    "target": "http://booking.localhost/",
    "logLevel": "debug",
    "changeOrigin": true
  }
}

Запускаю так

ng serve --proxy=proxy.conf.json --delete-output-path=false

второй параметр чтобы папку куда ng build --prod кладёт файлы не очищало, ибо оттуда symfony грузится.

Comments

[Артур]

Файл с проксей штука ох как полезная в девелопе.

Answer 2

[Ilya]

а что в респосе то?