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) => {
    console.log('response', response)
})

二、Axios.post 请求报错

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

• 请求方式

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

      withCredentials: true
    }
)

• Response 返回信息

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

• 以为是需要 token，就在请求头上面加上 token，结果还是报错，变成了 invalid crsf 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:

1. API 风格： fetch 是基于 Promise 的现代 API，它返回一个 Promise 对象，使得异步代码更容易理解和处理。
2. 语法： 使用 fetch 的语法相对简洁，但需要处理 JSON 数据时，需要使用 .json() 方法。
3. 跨域请求： fetch 遵循同源策略，但可以通过设置 CORS 头来进行跨域请求。
4. 默认不发送 Cookie： 默认情况下，fetch 不会发送包含用户凭证的 Cookie，除非设置了 credentials: 'include'。
5. fetch 在处理跨域请求时，如果服务器响应中包含了合适的 CORS（跨域资源共享）头（例如 Access-Control-Allow-Origin），浏览器可能会放宽同源策略，允许跨域请求携带 Cookie。

2. AJAX:

1. API 风格： AJAX 是一种老式的异步请求技术，基于 XMLHttpRequest 对象。它通常使用回调函数来处理异步响应。
2. 语法： AJAX 的语法相对复杂，尤其是在处理不同阶段的回调函数时。
3. 跨域请求： 默认情况下，AJAX 遵循同源策略，跨域请求需要服务器端支持 CORS 或使用 JSONP 等技术。
4. 发送 Cookie： 默认情况下，AJAX 会发送包含用户凭证的 Cookie。

四、 为什么用 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 头来配置跨域请求。

在使用 fetch 时，确保后端服务器正确配置了 CORS 头，以允许请求携带 Cookie。