Почему не устанавливаются cookies про обращении SPA по API к серверу?

Question

[Алиса]

Есть приложение на React, которое расположено на хосте mysite.com. Оно общается по API с сервером расположенном на хосте api.othermysite.com. Все работало отлично, пока дело не дошло до авторизации и установки сессионной куки на клиенте (браузере).
Сессионная кука с api сервера прилетает, но никак не устанавливается, чтобы я ни делала.
На клиенте запросы отправляю через axios со следующими параметрами:

const instance = axios.create({
    withCredentials: true,
    baseURL: (api.othermysite.com),
    headers: {
        'App-Name': (name),
        'Api-Key':  (key),
    },
})

Сервер написан на php. Заголовки ответа следующие:

$this->response->addHeader('Access-Control-Allow-Credentials: true');
        $this->response->addHeader('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
        $this->response->addHeader('Access-Control-Allow-Origin: mysite.com" );
        $this->response->addHeader('Access-Control-Allow-Headers: Content-Type, App-Name, Api-Key, Access-Control-Allow-Credentials');
        $this->response->addHeader('Cross-Origin-Resource-Policy: cross-origin');
        $this->response->addHeader('Content-Type: application/json');

Весь смысл API в том, чтобы обращаться к нему из разных источников, но как сохранить состояние сессии на клиенте не могу понять.

Comments

[Василий Банников]

Весь смысл API в том, чтобы обращаться к нему из разных источников, но как сохранить состояние сессии на клиенте не могу понять.

local storage / session storage

И если уж хотите сохранять в куки, то где заголовок Set-Cookie?

[Алиса]

И если уж хотите сохранять в куки, то где заголовок Set-Cookie?

На стороне сервера куки отправляю с помощью функции setcookie() или его как-то отдельно нужно отправлять?

Вообще сессионная кука с сервера прилетает только она не устанавливается для хоста клиента.



Значение domain меняла на хост клиента, не помогло(

[Алиса]

nokimaro, Но как я могу получить сессионную куку на клиенте, если ее устанавливает сервер?
В моем понимании должно работать так:
1) Client-- (login, password)--->Server
2) Server (если OK) -------> отправляет cooke с идентификатором сессии -----> Client
3) При дальнейших запросах эта кука летает от клиента к серверу пока не протухнет.

Поправьте если я не права.

[nokimaro]

Алиса, отправлять нужные данные через другие header'ы
header('X-Session-Id: '.session_id());

Answer 1

[Алиса]

Я разобралась! Для того чтобы все работало так как я хотела нужно на стороне сервера при установке cookies в setcookie добавить опции SameSite=None, Secure и тогда браузер будет устанавливать cookies.
Но имейте ввиду, что опция Secure требует работы по защищенному протоколу https, по этому для локальной разработки в браузере Chrome нужно отключить проверку этого параметра.
chrome://flags параметер SameSite by default cookies перевести в положение Disabled

Comments

[Sergey Khindrikson]

Я не нашел параметр SameSite by default cookies, не подскажешь где он сейчас?