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`:

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

2. `AJAX`:

API 风格： AJAX 是一种老式的异步请求技术，基于 XMLHttpRequest 对象。它通常使用回调函数来处理异步响应。
语法： AJAX 的语法相对复杂，尤其是在处理不同阶段的回调函数时。
跨域请求： 默认情况下，AJAX 遵循同源策略，跨域请求需要服务器端支持 CORS 或使用 JSONP 等技术。
发送 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。