玉环哪里有做网站,住建部网站统计城乡建设统计信息系统登录,汉中北京网站建设,百度推广一个关键词多少钱关于vue使用axios post发送json数据跨域请求403的解决方法#xff1a;1. 问题vue开发的时候#xff0c;使用axios跨域发送请求#xff0c;同时post发送的数据格式是json格式#xff0c;发送出去的时候发现控制台报错403#xff0c;返回的信息提示是跨域的问题#xff0c;…关于vue使用axios post发送json数据跨域请求403的解决方法1. 问题 vue开发的时候使用axios跨域发送请求同时post发送的数据格式是json格式发送出去的时候发现控制台报错403返回的信息提示是跨域的问题但是后台已经对跨域进行了处理因此出现这个问题并不是后台的问题需要在前端解决而且通过查看后台的日志发现后台根本没有接收到请求。2. 查找资料网上找了很多资料比如说法一、 通过设置post请求的header中的Content-Type值为application/x-www-form-urlencoded然后重新发送请求发现控制台还是返回403跨域信息的错误说法二、 在设置post请求的header中的Content-Type值为application/x-www-form-urlencoded以后使用transformRequest方法对发送的数据进行处理这个时候奇迹发生了请求发送出去了并且成功获取了后台的响应但是发现这种方法存在一个问题就是发送出去的数据不是JSON格式而是字符串格式真是令人头大然后不管我怎么折腾都没有把这个方法解决。3. 解决方法就在这个问题陷入僵局的时候我突然想到之前使用jquery的时候也曾经遇到过相关的问题但是通过设置Content-Type的值为text/plain解决的问题于是乎我将post请求的headers中的Content-Type的值从application/x-www-form-urlencoded修改为text/plain然后重新发送请求这个时候奇迹再次发生了问题解决了4. 总结解决方法设置全局post请求的Content-Type值为text/plain然后在发送请求的时候需要对JSON数据进行stringify转化一下即可完美解决问题当然可以不用设置全局只需要单独配置某个请求也是可以的防止后面有其他类型的请求造成污染。注浏览器跨域并不支持application/json的Content-Type即使后台设置了允许的跨域头部参数依然会报错。本文所述的问题是基于后台已经做了跨域处理的情况下如果不确定后台是否已经作跨域处理建议先用原生的ajax或者jquery等进行问题排查不要因为后台的疏忽导致前端浪费时间去处理。此次更新采用更规范更容易维护的方法来解决问题。将请求进行分离统一处理所有的request和responserequest.js代码如下:import axios from axios
import { Notification } from element-ui// 创建axios实例
const service axios.create({baseURL: process.env.BASE_API,timeout: 50000 // 请求超时时间
})// request拦截器
service.interceptors.request.use(config {config.headers[Content-Type] text/plain // 关键所在return config},error {console.log(error) // for debugPromise.reject(error)}
)// response 拦截器
service.interceptors.response.use(response {const res response.dataif (res.resultCode ! 000) { // 后台返回码根据自己的业务进行修改Notification.error({title: 错误,message: res.resultDesc, // 错误描述信息duration: 0})return Promise.reject(error)} else {return response.data}},error {console.log(err error) // for debugNotification.error({title: 错误,message: error,duration: 0})return Promise.reject(error)}
)export default service
引用test.jsimport request from /utils/requestexport function sendRequest(params) {return request({url: /services/test,method: post,data: JSON.stringify(params),// header: { // 已经在request.js里面进行全局设置也可以在请求里面局部设置其他headers// Content-Type: text/plain// }})
}发送请求test.vue:import { sendRequest } from /api/requestlet postData {serviceType: logQuery,occurTime: new Date(),key: scope.row.key,type: scope.row.type}sendRequest(postData).then(response {console.log(response)})
