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

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

这个问题是在一个 post 请求的跨域接口上出现的

很奇怪的问题，可以直接看一解决方案就行了

一、解决方案

问题：使用 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。