**
1.axios
**
1.在cmd窗口输入以下命令安装到项目目录
cd 项目目录
cnpm install axios -S
2.在项目的main.js中挂载
import axios from 'axios'
Vue.prototype.$http=axios;
//过载axios到vue的原型公共方法上
//所有的vue的实例都将拥有$http
3.get方式
get方式
this.$http.get(url?page=1)
this.$http.get(url,params:{page:2}) //params传参
4.post方式
this.$http.post(url,"k=v&k2=v2",{
"Content-Type":"application/x-www.form-urlencoded"
})
4.file上传文件
<template>
<div>
<input type="file" ref ="file">
</div>
</template>
<script>
export default {
let file = this.$refs.file[0];
let data = new FormData().append("file",file);
let configs = {
headers:{'Content-Type':'multipart/form-data'}
}
this.$http({
method:'post',
url:'/ajax/file.php',
data,
configs
})
}
</script>
5.全局配置
在mane.js中
axios.defaults.baseURL = "http://xxx.com";
// 配置基础url
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 配置post编码
// axios.defaults.withCredentials = true;
//跨域请求的全局凭证
全局配置完后
$http.get("htttp://www.xxx.com/list.php")
$http.get("/list.php")
效果一样
jsonp跨域
1.在需要使用的组件中导入jsonp
import jsonp from '../assets/js/jsonp'
2.使用
jsonp(“url”,{},
(err,data)=>{
…;
}
)
代理方式跨域
在项目根目录下创建vue.config.js,内容如下
module.exports = {
devServer: {
open: true, //浏览器自动打开页面
host: "localhost", //本地服务器访问的路径
port: 8080, //本地服务器访问的端口
proxy: {
'/BtCApi': {
//你要跨域的域名(包含host、端口号,切记:一定要带上http头);
//同一个域名只能设置一次跨域,否则重复报错!
target: 'http://m.gjw.com', //你要跨域的域名
changeOrigin: true, //是否跨域,设置为true;(必须)
},
// 当用户去访问 http://localhost:8080/feiyan/xxx的时候
// 咱们的本地服务器器就会去访问 https://iflow-api.uc.cn/feiyan/xxx
// 让把拿到的数据返回给用户(ajax请求)
// 这种方法让我们能在开发环境请求下,跨域访问数据。
}
},
publicPath: './'
}