Vue3开发学习笔记:使用axios post请求WebService

问题一:使用post请求时提示Request header field content-type is not allowed by Access-Control-Allow-Hea(跨域请求的错误)

原代码

 const url = 'http://localhost:2681/PXWebService.asmx/CallService'
    const parames = { serviceName: 'FormMain_inq', parameters: ' ' }
    axios.post(url, parames)
      .then((response) => {
        console.log('调用WebService成功返回结果', response)
      })

问题一解决方案:

在post请求时第三个参数加上请求头headers相关的配置,以下Content-Type类型是在postman工具中请求成功,因此在代码中使用该种类型

const config = {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }

问题二: post传入参数失败

原写法:

const parames = { serviceName: 'FormMain_inq', parameters: ' ' }
    axios.post(url, parames, config)
      .then((response) => {
        console.log('调用WebService成功返回结果', response)
      })

问题二解决方案:

使用qs库来格式化数据

学习自:vue 使用axios post请求传递参数不成功问题解决_晓果博客的博客-CSDN博客_axios参数传递不过去使用qs库来格式化数据npm install qs --save 在main.js中，我们引入qs库// post请求是格式化数据import qs from 'qs';Vue.prototype.$qs = qs;进行post请求 this.$axios .post( "/app/user/login.do",...https://blog.csdn.net/huangxiaoguo1/article/details/80169742

const parames = qs.stringify({ serviceName: 'FormMain_inq', parameters: ' ' })

 完整成功的axios.post()请求代码

const url = 'http://localhost:2681/PXWebService.asmx/CallService'
    // const url = 'http://192.168.1.102:100/PXWebService.asmx/CallService'
    const config = {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }
    const parames = qs.stringify({ serviceName: 'FormMain_inq', parameters: ' ' })
    axios.post(url, parames, config)
      .then((response) => {
        console.log('调用WebService成功返回结果', response)
      })
      .then((err) => {
        console.log('调用WebService失败返回结果', err)
      })