为什么axios请求不成功

加油
  • 70

<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的参数去掉过后,就能正常访问这个接口了
回复
阅读 4.3k
8 个回答

你确定是同一个地址吗:

clipboard.png

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

我猜是因为cors策略。

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

解决方法:

  1. content-type 2. 后台做 options 预检请求处理。
使用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=>{
      })
    }     

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

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

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

axios post 请求安装插件qs

你知道吗?

宣传栏