浏览器不存储cookie

Question

我将Laravel应用程序（http://backend.local）中的Cookie发送给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
  日期：2018年5月21日星期一09:42:35 GMT
  服务器：Apache
  Set-Cookie：name = value;到期=周一，201-May-2018 10:42:36 GMT;最大年龄= 3600;路径= /;域=。本地
  缓存控制：无缓存，私有
  Access-Control-Allow-Origin：http://frontend.local:8080
  变化：起源
  X-RateLimit-Limit：60
  X-RateLimit-Remaining：59
  内容长度：2
  保持活跃：超时= 10，最大= 100
  连接：保持活力
  内容类型：text / html; charset = UTF-8

但是broswer存储中没有Cookie（开发人员控制台中的“应用程序”选项卡）。 怎么了？

更新：我认为问题是http://frontend.local:8080中有端口号。我可以从网址中删除端口号吗？

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 -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

当您在浏览器中导航时，您会看到包含Domain=.local的Cookie被丢弃，但其余2仍然存在

稍后您可以看到两个cookie都已发送到同一页面的重新加载

2018年5月30日更新

由于您使用的是2个不同的域，因此您应该使用frontend.local.com和backend.local.com，并且Cookie应与域.local.com一起返回，以便backend和{{ 1}}作为frontend的子域。然后local.com获取由frontend.local.com通过域共享设置的Cookie，因为Cookie域设置为backend.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 => {})

[编辑]：在HTML Rocks了解有关CORS的更多信息。

如果它没有帮助，请告诉我。