Axios.post 请求报错： 403 Forbidden missing csrf token 和 invalid csrf token

`Axios.post` 请求 报错：`403 Forbidden` `missing csrf token` 和 `invalid csrf token` 问题及解决

问题：使用 Axios.post 请求报错：missing csrf token 和 invalid csrf token

解决：把请求方式换成 Fetch

const params = {
    method: 'post',
    body: JSON.stringify(data),
    Headers: {
        'Content-Type': 'appliction/json'
    }
}

fetch(url, params).then((response) =&gt; {
    console.log('response', response)
})

二、`Axios.post` 请求 报错

使用 axios 对一个 post 接口请求，忽然发现报错了 403 Forbidden

const postData = await axios.post(
    url,
    { ...data },
    {

      withCredentials: true
    }
)

{
    status: 403,
    statusText: "Forbidden",
    data: {
        "message": "missing csrf token"
    }
}

{
    status: 403,
    statusText: "Forbidden",
    data: {
        "message": "invalid csrf token"
    }
}

无效的 token…

问了下后端，后端也懵，网上查了不少资料，但是都不行，都是上面两种错误来回切

后来无意间换成了 fetch，接口通了…不仅不需要 token，连 cookie 也没传…

所以解决方案就是换成 fetch 请求

查了下 Fetch 和 Axios/AJAX 的区别

三、`Fetch` 和 `Axios` 的区别

因为 axios 是一个基于 XMLHttpRequest 和 Promise 的库，所以就拿 fetch 和 AJAX 来比较了

Fetch 和 AJAX 是用于在前端进行异步网络请求的两种不同的技术。

1. `Fetch`:

2. `AJAX`:

四、为什么用 `Fetch` 就不会报错

因为在涉及到 CSRF（跨站请求伪造）保护的情况下，服务器通常会要求请求中包含有效的 CSRF 令牌，以确保请求是从合法的源发出的。出现 403 错误（missing csrf token）通常是由于缺少 CSRF 令牌或者令牌不正确导致的。

使用 axios.post 请求接口会报 403 错误，而使用 fetch 请求不会，这可能是由于两者默认处理请求的方式不同。

1. `Axios`

axios 默认不携带跨站请求伪造（CSRF）令牌。为了解决这个问题，你需要手动设置请求头，将 CSRF 令牌包含在请求中。

axios.post(url, data, {
    headers: {
        'X-CSRF-Token': 'your_csrf_token',
        'Content-Type': 'application/json'
    }
})

而出现 invalid csrf token 则是因为 your_csrf_token 取错了，或者原本不正确

2. `Fetch`

fetch 在默认情况下也会受到同源策略的限制，但在某些情况下，它可能会自动携带当前域的 Cookie（包括 CSRF 令牌），这可能是因为浏览器对于一些简单的 GET、HEAD、POST 请求不会强制遵守同源策略，而 fetch 被设计成更加灵活，可以通过 CORS 头来配置跨域请求。