Браузер не хранит куки

Question

Я отправляю Cookie из приложения Laravel (http://backend.local) в Vue SPA (http://frontend.local:8080):

Сторона Laravel (фиктивный маршрут)

//api routes
Route::post('login', function () {
    setcookie("name", 'value', time()+3600, "/", ".local");
    return response('ok');
});

Сторона Vue

axios.post('//backend.local/api/login')
    .then(response => {
        console.log(response)
    }).catch(error => {
})

Заголовки ответа:

HTTP / 1.1 200 OK
Дата: понедельник, 21 мая 2018 09:42:35 GMT
Сервер: Apache
Set-Cookie: имя = значение;истекает = понедельник, 21 мая 2018 года 10:42:36 мск;Max-Age = 3600;Путь = /;домен = .local
Cache-Control: без кэширования, частный
Access-Control-Allow-Origin: http://frontend.local:8080
Варьируется: Origin
X-RateLimit-Limit: 60
X-RateLimit-Remaining: 59
Content-Length: 2
Keep-Alive: тайм-аут = 10, max = 100
Соединение: Keep-Alive
Content-Type: text / html;charset = UTF-8

Но в хранилище более нет файлов cookie (вкладка «Приложение» в консоли разработчика).Что не так?

---

ОБНОВЛЕНИЕ: Я думаю, проблема в том, что в http://frontend.local:8080 есть номер порта.Могу ли я удалить номер порта из URL?

Answer 1

Оригинальный ответ

Браузер автоматически отклонит любой домен, который не состоит из двух частей.Таким образом, использование .local вообще не считается доменом.Вам нужно минимум два уровня.Рассмотрим приложение колбы, которое я создал для демонстрации того же самого

from flask import Flask, request, make_response

app = Flask(__name__)

@app.route("/")
def index():
    resp = make_response()

    resp.set_cookie('value1', ".frontend.local", domain=".frontend.local")
    resp.set_cookie('value2', "frontend.local", domain="frontend.local")
    resp.set_cookie('value3', ".local", domain=".local")
    return resp

app.run(debug=True)

. Теперь тестируем это с помощью curl

$ curl -v frontend.local:5000
* Rebuilt URL to: frontend.local:5000/
*   Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to frontend.local (127.0.0.1) port 5000 (#0)
> GET / HTTP/1.1
> Host: frontend.local:5000
> User-Agent: curl/7.54.0
> Accept: */*
>
* HTTP 1.0, assume close after body
< HTTP/1.0 200 OK
< Content-Type: text/html; charset=utf-8
< Set-Cookie: value1=.frontend.local; Domain=.frontend.local; Path=/
< Set-Cookie: value2=frontend.local; Domain=frontend.local; Path=/
< Set-Cookie: value3=.local; Domain=.local; Path=/
< Content-Length: 0
< Server: Werkzeug/0.14.1 Python/3.6.5
< Date: Tue, 29 May 2018 12:58:20 GMT
<
* Closing connection 0

. Когда вы просматриваете это в браузере, вы можете видеть, что cookie с Domain=.local удаляется, но остальные 2 остаются

И позже вы можете видеть, что оба куки были отправлены для перезагрузки одной и той же страницы

Обновление 1: 30 мая 2018 года

Поскольку вы используете 2 разных домена, вы должны использовать frontend.local.comи backend.local.com и файлы cookie должны быть возвращены с доменом как .local.com, чтобы backend и frontend работали как поддомен local.com.Затем frontend.local.com получает файлы cookie, установленные backend.local.com, через общий доступ к домену, если для домена cookie установлено значение .local.com

.

Answer 2

Поскольку это вызов CORS, вам нужно установить setCredentials на true.Это стандартное поведение: Стандартные запросы CORS не отправляют и не устанавливают файлы cookie по умолчанию.

Свойство withCredentials будет включать в запрос любые файлы cookie из другого домена, а также устанавливатьлюбые файлы cookie из другого домена.

Таким образом, ваш код Vue.js будет:

axios.defaults.withCredentials = true
axios({
    method: 'POST',
    url: '//backend.local/api/login',

    // THIS IS IMPORTANT
    withCredentials: true
})
.then(response => {
    console.log(response)
}).catch(error => {})

[Редактировать]: Подробнее о CORS можно узнать по HTML Rocks .

Пожалуйста, дайте мне знать, если это не поможет.