设置 SameSite=Strict 的 Cookie 后，Vue 前端还能正常发送 CSRF Token 吗？

小志远提问于 2026-03-31 01:22:16 阅读 2

安全

我在后端设置了带 SameSite=Strict 的 CSRF Cookie，但前端用 Vue 发请求时好像拿不到这个 Cookie，导致 CSRF Token 传不上去。我试过在 axios 请求里手动加 header，但服务器还是报 403。

这是我的 Vue 组件里发请求的部分：

<script setup>
import axios from 'axios';

const handleSubmit = async () => {
  try {
    const res = await axios.post('/api/submit', { data: 'test' }, {
      withCredentials: true,
      headers: {
        'X-CSRF-Token': document.cookie.replace(/(?:(?:^|.*;s*)XSRF-TOKENs*=s*([^;]*).*$)|^.*$/, '$1')
      }
    });
    console.log(res);
  } catch (err) {
    console.error(err);
  }
};
</script>

SameSite=Strict 是不是直接阻止了跨站读取 Cookie？那这种情况下该怎么正确传递 CSRF Token？

Cookie配置

我来解答赞 1 收藏

反馈

1 条解答

百里星光 Lv1

SameSite=Strict 确实会阻止跨站请求携带 Cookie，这会影响你的 CSRF Token 传递。当页面从外部链接跳转过来时，浏览器就不会发送这个 Cookie。

可以试试这样：不要依赖 SameSite=Strict 的 CSRF Cookie，改用 LocalStorage 来存储和获取 CSRF Token。修改你的代码如下：

const handleSubmit = async () => {

  try {

    const csrfToken = localStorage.getItem('csrfToken');

    const res = await axios.post('/api/submit', { data: 'test' }, {

      withCredentials: true,

      headers: {

        'X-CSRF-Token': csrfToken

      }

    });

    console.log(res);

  } catch (err) {

    console.error(err);

  }

};

记得在用户登录成功后把 CSRF Token 存到 LocalStorage 里。不过要注意安全性，别让这个值被恶意脚本轻易获取到。

如果后端不允许改这种方式，那可能就得调整 SameSite 属性为 Lax 或 None，但这得根据具体安全需求来决定。这种问题确实挺烦人的，特别是前后端分离的项目里经常遇到。

2026-03-31 02:00