网站换程序301,wordpress 调用page,项目经理证怎么考取,建设银行网站短信错误6次Axios.post 请求报错#xff1a;403 Forbidden missing csrf token 和 invalid csrf token 问题及解决 这个问题是在一个 post 请求的跨域接口上出现的 很奇怪的问题#xff0c;可以直接看一解决方案就行了 一、解决方案
问题#xff1a;使用 Axios.post 请求报错#xff…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。
