为什么axios请求不成功

Question

<script src="https://unpkg.com/axios/dist/...;></script>

    <script src="./js/Jquery.js"></script>
    <script>
        $.ajax({
            url: "http://betai.yiboshi.com/sign/apply/info/addApplyInfo",
            type: "POST",
            data:{
                test:22
            },
            dataType: "json",
            success: function(data) {
            
            }
        });
        axios.post('http://beta.yiboshi.com/sign/apply/info/addApplyInfo',{
            test:222
        })
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
        这两个请求都是同一个地址，同一个参数，为什么我的axios就是抱跨越的错呢，而且，当我把axios的参数去掉过后，就能正常访问这个接口了

Answer 1

你确定是同一个地址吗：

Answer 2

看一下axios引入没，如果挂载全局this.

Answer 3

我猜是因为cors策略。

1. axios默认 content-type 是 application/json ，属于非简单请求会触发options预检。而你们后台没有做对应的响应策略报跨域。
2. 而ajax默认是 application/x-www-form-urlencoded 不会触发预检，且后台能够接收。

解决方法：

1. 改 content-type 2. 后台做 options 预检请求处理。

Answer 4

使用qs
安装qs

    npm install axios

然后在main.js中全局设置
//引入qs

    import qs from 'qs'

//设置baseURL

    Axios.defaults.baseURL = 'https://route.showapi.com';

//请求头

    Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

最后在vue文件中

    this.$axios.post('/25-3',qs.stringify({
       //传给后端的对象
      }))
      .then(rsp=>{
      })
      .catch(error=>{
      })
    }     

Answer 5

应该是这两种方式像后端发送的数据格式不一样导致的。

Answer 6

let param = new URLSearchParams()
param.append('test',222)
post的时候传参数要这样，

Answer 7

比较一下ajax和axios两个请求的请求体有什么不同呢

Answer 8

axios post 请求安装插件qs