vue中axios跨域请求

vue中axios跨域请求

1.axios 是 第三方库
使用方法：

• 使用 npm:

    $ npm install axios

• 使用 bower:

$ bower install axios

• 使用 cdn:

axios get 请求示例

HTML代码



    
    
    
    
    
    


    

        get-mock-data
         get-api-data 
    
    

js代码

get跨域请求中params:中的值对应hearders中Query String Parameters


get方法总结：

A: 无参数
        axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error))
 B: 有参数
        axios({
            url: 'http://xxx',
            method: 'get' //默认就是get,这个可以省略，
            params: {
                key: value
            }
        })

axios post 请求示例

html代码
  post-data 
 
 js代码
       postData(){
                    let params = new URLSearchParams()//得到params对象，用来接收请求参数
                    // params.append( key, value )  key是参数名，value是参数值
                    //传递参数值
                     params.append( 'a', 2 )
                     params.append( 'b', 2 )

                    axios({
                        url:'http//localhost/php',
                        method:'post',
                        headers:{//请求头设置为表单提交的请求头
                            'Content-Type':"application/x-www-form-urlencoded"
                        },
                        data:params,
                    }).then( function (val) {
                        console.log(res)
                    }).catch( function (error) { 
                        console.log(error)
                    })
                }
            }
            官方文档中axios post请求案例有点问题，请求会出现跨域问题；
			以上示例为解决官方文档存在问题的写法；

post方法总结

//对于post请求可以统一设置一个请求头，后面所有post请求就可以不用单独设置请求头了
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

 // 具体语法
 let params = new URLSearchParams()//得到params对象，用来接收请求参数

// params.append(key,value) //请求参数写成键值对key就是参数名，value就是参数值

params.append('a',1)
params.append('b',2)

axios({
    url: 'http://localhost/post.php',
    method: 'post',
    data: params,//将请求参数写入data;
      headers: {  //单个请求设置请求头
       'Content-Type': "application/x-www-form-urlencoded"
    }
})
.then(res => {
    console.log( res )
})
.catch( error => {
    if( error ){
    throw error
}
})