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。
