记录nuxt开发中响应体中有setcookie，但是并不能保存到本地的问题

问题

问题如上，就是cookie存不下来的问题，明明已经有set-cookie这个字段了，但是始终无法保存下来cookie。服务器地址为localhost:3030，前端地址为localhost:3000

思路

看了很多网上大佬的思路，大概是三类：

（1）没有设置上跨域相关的内容导致安全性问题

（2）设置了CORS跨域，但是可访问地址不能设置为“ * ”，相反，需要一个指定的地址，如：localhost。

（3）前端请求中没有设置with-credentials

相关改进后

做了相关改进，当前的请求头后响应头分别如下。但是这样弄之后依然是没有能保存下来我的cookie，所以就愈发扑朔迷离了...

// 下面是响应头
HTTP/1.1 201 Created
Access-Control-Allow-Origin: http://localhost:3000
Vary: Origin
Access-Control-Allow-Credentials: true
Content-Security-Policy: default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Resource-Policy: same-origin
Origin-Agent-Cluster: ?1
Referrer-Policy: no-referrer
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff
X-DNS-Prefetch-Control: off
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-Permitted-Cross-Domain-Policies: none
X-XSS-Protection: 0
Set-Cookie: geji_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWQiOjEsImlhdCI6MTczNDE2MzQ4OSwiZXhwIjoxNzM0NzY4Mjg5fQ.2FjW4I-IkiXBBIxFV1KlIJWonVzxNRYOXcoA52aSzvg; Max-Age=604800; Path=/; Expires=Sat, 21 Dec 2024 16:34:13 GMT; HttpOnly; Secure; SameSite=Lax
Set-Cookie: geji_id=1; Max-Age=604800; Path=/; Expires=Sat, 21 Dec 2024 16:34:13 GMT; HttpOnly; Secure; SameSite=Lax
Content-Type: application/json; charset=utf-8
Content-Length: 574
ETag: W/"23e-WPw0eNxd2EDudShhtDgQR11SyWo"
Date: Sat, 14 Dec 2024 16:34:13 GMT
Connection: keep-alive
Keep-Alive: timeout=5


// 后面是请求头
POST /user/login HTTP/1.1
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
Connection: keep-alive
Content-Length: 46
Host: localhost:3030
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1 Edg/131.0.0.0
accept: application/json
content-type: application/json
geji_token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWQiOjEsImlhdCI6MTczNDE2MzQ4OSwiZXhwIjoxNzM0NzY4Mjg5fQ.2FjW4I-IkiXBBIxFV1KlIJWonVzxNRYOXcoA52aSzvg
user_id: 1
with-credentials: true

最终解决

后面看了下文档，还有些人的写法，发现问题出在前端配置，也就是with-credentials这个东西上。因为之前用的是axios、fetch等库或者方法，一直用的是“with-credentials”这个字段的，但是在nuxt上有点不同，不是设置这个字段，而是“credentials ”这个字段。具体改进如下：

// 修改前
await $fetch(baseUrl + url, {
        method,
        body: data ? JSON.stringify(data) : null,
        headers: {
          "Content-Type": "application/json",
          "With-Credentials": true, // 直接设置请求头
        },
        withCredentials:true // 修改配置
      });


// 修改后
await $fetch(baseUrl + url, {
        method,
        body: data ? JSON.stringify(data) : null,
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "include", //其实主要是这个配置...
      });

通过这样的方式就解决了cookie不能存储的问题了。

真是头大...