Vue 3 和 cookie答案

【问题标题】：Vue 3 and cookiesVue 3 和 cookie
【发布时间】：2020-04-01 17:50:59
【问题描述】：

我正在使用 Vue 3 构建前端，并使用 fastAPI 构建后端。我想在身份验证过程中使用 httponly，但我没有在浏览器中看到收到了 cookie。我已经与 Postman 核对了对后端的请求，我看到了带有来自后端的数据的“set-cookie”。

前端：

Vue 3
Axios 0.18.1
网址：127.0.0.1:8080

后端：

FastAPI
独角兽
网址：127.0.0.1:8000

在前端使用 Axios 发布消息是这样的：

axios
    .post(process.env.VUE_APP_API_URL + '/login', this.auth, {withCredentials: true})
    .then(res => {
      console.log(res.data);
    })
    .catch(e => {
      console.log(e);
    });

在后端我配置了明确的来源：

    origins = [
    "http://localhost",
    "http://localhost:8080",
    "http://127.0.0.1",
    "http://127.0.0.1:8080",
]
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

当我将响应返回给前端时：

    response.set_cookie(
        key="Authorization",
        value=f"Bearer {token}",
        domain="127.0.0.1",
        path="/login",
        httponly=True,
        secure=False,
        max_age=1800,
        expires=1800,
    )

感谢您的提前。

【问题讨论】：

标签： vue.js cookies vuejs2 vue-cli-3 fastapi

【解决方案1】：

我已经完成了以下更改，现在它正在工作：

前端：

.env.development 文件：

NODE_ENV=development
VUE_APP_API_URL=http://localtest.me:8000

后端：

origins = [
"http://localhost",
"http://localhost:8080",
"http://localtest.me",
"http://localtest.me:8080"

]

response.set_cookie(
        key="Authorization",
        value=f"Bearer {token}",
        domain="localtest.me",
        path="/",
        httponly=True,
        secure=False,
        max_age=1800,
        expires=1800,
    )

【讨论】：