业务API接口地址: http://localhost:3816/api/

前端UI浏览地址:http://127.0.0.1:8080/#/home

由于同源策略的问题: 需要配置代理: 

在开发环境下配置如下:config/index.js

 assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': { //将www.exaple.com印射为/apis
target: 'http://localhost:3816/api/', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '/',
} }
}, // Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

  

主要内容为

 proxyTable: {
'/api': { //将www.exaple.com印射为/apis
target: 'http://localhost:3816/api/', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '/',
} }
},
在main.js 配置axios 请求的基础地址时:
如下:
import axios from 'axios'
import Vuex from 'vuex'
import IView from 'iview'
import 'iview/dist/styles/iview.css';
Vue.use(IView);
Vue.use(Vuex);
Vue.prototype.axios = axios;
axios.defaults.timeout = ;
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
axios.defaults.baseURL = "http://localhost:3816/api/";

数据请求的基础接口地址为      http://localhost:3816/api/    这样配置后就可以在发请求的时候,不需要添加具体的域名地址了,就可以访问数据

如:
this.axios.get("Values")
.then(Response => {
console.log(Response);
});
这配置的过程中发现如下问题:
1.baseURL 必须配置。
2.config/index.js  中的地址不配置 也可以访问到数据 原因未知,欢迎告知
两者具体由什么联系呢????

vue中访问数据接口的配置的更多相关文章

  1. es6中的Proxy和vue中的数据代理的异同

    1:概述 1-1:Proxy 用于修改某些操作的默认行为,Proxy可以说在对对象进行各种访问或者操作的时候在外层进行一层拦截,在操作之前都需要经过这种拦截.proxy返回的是一个新对象,可以通过操作 ...

  2. vue中的数据监听以及数据交互

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...

  3. 关于cordova+vue打包apk文件无法访问数据接口

    作为一个cordova小白,我按照官方文档和网上资料完成了讲vue文件打包到cordova中并打包成apk文件,完成了一个简单app的制作,当我正陶醉于可以自己完成一个app的时候突然发现,我的app ...

  4. 在 SharePoint 2010 中访问数据

    转:http://blog.banysky.net/?p=81001 数据访问的关键方法有哪些? | 使用查询类 | 使用 SPQuery | 使用 SPSiteDataQuery | 使用 LINQ ...

  5. vue中axios调用接口和用node.js跨域

    <script>const API_PROXY = 'https://bird.ioliu.cn/v1/?url='import axios from 'axios'export defa ...

  6. vue中的数据双向绑定

    学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...

  7. Pod中访问外部的域名配置

    在实际应用中经常遇到Pod中访问外部域名的状况,在Kubenetes 1.6以上的版本通过配置DNS configmap已经解决,详细的内容可以参考官方的 https://kubernetes.io/ ...

  8. vue 中全局filter过滤器的配置及使用

    在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...

  9. WebService---Android中访问WebService接口的方法

     最近公司有个项目需要从Android平台访问WebService接口,实现向发布的函数传递对象.在网上找了一些资料,发现使用ksoap2可以调用WebService传递对象.   需要引入ksoap ...

随机推荐

  1. hdu5044(二分)

    题意:一个树上建两个加油站.使得全部点到达其近期加油站的最大距离最小. 解法:二分答案.关键时二分时候,要最合理话布局两个点的位置,做法是处理出来树的直径,然后在直径两端分别向中间移动二分的x步的两个 ...

  2. acdream 1414 Geometry Problem

    Geometry Problem Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others)    ...

  3. 捣鼓TinyMCE粘贴图片并上传+Flask后台

    好久没有编程了,最近需要完成一个小功能,为了方便,需要粘贴图片后上传到后台.前台编辑器用tinymce(N年前用过,我也就知道这个编辑器而已.这次使用下来感觉文档更丰富了),后台我用的Flask.昨天 ...

  4. html5 拖放事件

    1.设置元素可拖拽属性:draggable true表示可拖拽. false表示不可拖拽. auto默认值,img和带href属性的a标签则表示可拖拽,其他标签表示不可被拖拽. 其他值表示不可拖拽. ...

  5. 2-SAT的小总结(POJ 3683 POJ 3207)

    记住几个最重要的公式: xANDy=0<=>(x=>y′)AND(y=>x′) xANDy=1<=>(x′=>x)AND(y′=>y) xORy=0&l ...

  6. 智能识别快递地址api接口实现(PHP示例)

    电商.ERP等行业发货时,批量录入图片上的收件人地址是个难题:智能识别收件人API是近乎完美的解决方案,通过识别图片,解析出图片中收件人的姓名.电话.详细地址(省.市.区/县.详细地址).将此接口集成 ...

  7. VUE-搜索过滤器

    先看看效果 首先引入 <script src="https://cdn.jsdelivr.net/npm/vue"></script> HTML部分 < ...

  8. CentOS 安装dotNetCore

    如果要在CentOS上运行.net Core程序,必须安装.net Core Sdk 具体安装 方法,可以参考微软官方站点说明,非常详细: 1)百度搜索 .Net Core 2)先择CentOS版本: ...

  9. 远程连接Oracle设置

    1:打开net manager:开始->程序->oracle->配置和移植工具->Net Manager 2:添加服务器名->名子自定义,一般根据项目自定义,自己知道就行 ...

  10. 总结Linq或者lamdba的写法

    var head = new OmsEcorderHead { PkEcorderHead = OrderHeadId, AppId = appid, Integral = Convert.ToDec ...