Vue 3 和 cookie

Posted 2023-03-16

【中文标题】Vue 3 和 cookie

【英文标题】：Vue 3 and cookies

【发布时间】：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,
    )

感谢您的提前。

【参考方案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,
    )