- getStore(){
- let that = this
- that.$axios({
- method: "post",// 指定请求方式
- url: "/business-app/getCityShopList.cgi",// 请求接口(相对接口, 后面会介绍到)
- data: {
- cityId: cityId,
- data:{},
- isDebug:"1",
- longitude: "",
- latitude: ""
- }
- })
- .then(function(res){
- // 接口成功返回结果执行
- })
- .catch(function(err){
- // 请求失败或者接口返回失败或者. then()中的代码发生错误时执行
- })
- }
4, 跨域与代理
在 vue 本地开发时请求总是发生跨域
解决方案: 配置代理
config 下的 index.js 文件
- proxyTable: {
- '/business-app/*': {
- target: 'http://****:8080',// 被代理的接口
- changeOrigin: true,
- secure:true // 如果是 https 接口, 需要配置这个参数
- }
- },
当 URL 以 '/business-app/'层级开端时, 把'http://****:8080' 代理成本地 IP
5,baseURL 与代理
两者用途不一样,
baseUrl 会附加到你绑定的 axios 实例 (如果是全局的, 那就是所有实例) 上, 即如果 get/post 的 url 参数是相对路径(如) /api/c/xx, 那就会执行 baseUrl + '/api/c/xx', 如果未指定 baseUrl, 那就走浏览器地址栏里的 base + baseUrl.
webpack 里的 proxyTable 是测试环境为了避免浏览器下的跨域访问, 而以 nodejs 代理成同前端页面 (即浏览器地址栏) 同域的一种处理. 指定 proxyTable 后, axios 就不需要指定 baseUrl 了. proxyTable 会把 base + '/api/c/xx'代理到[base baseUrl + '/api/c/xx'] 的接口地址上.
当然工程发布时, 后端和前端也需要发布到同一个域下.
6,axios 与 vue-axios
先看两者的用法
Vue.prototype.$axios = axios
和
- import Vueaxios from 'vue-axios'
- Vue.use(VueAxios,axios)
解释: 使用 vue-axios 更多是为了符合规范, 并且方便协作
7, 其他待补充
对于跨域的处理, 除了采用代理外, 也可用 JSONP 或者 Qs(axios 官方推荐)方案, 待详细研究后再来补充
来源: https://www.cnblogs.com/weichen913/p/9289221.html