vue中访问数据接口的配置
业务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/ 这样配置后就可以在发请求的时候,不需要添加具体的域名地址了,就可以访问数据
- 如:
vue中访问数据接口的配置的更多相关文章
- es6中的Proxy和vue中的数据代理的异同
1:概述 1-1:Proxy 用于修改某些操作的默认行为,Proxy可以说在对对象进行各种访问或者操作的时候在外层进行一层拦截,在操作之前都需要经过这种拦截.proxy返回的是一个新对象,可以通过操作 ...
- vue中的数据监听以及数据交互
现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...
- 关于cordova+vue打包apk文件无法访问数据接口
作为一个cordova小白,我按照官方文档和网上资料完成了讲vue文件打包到cordova中并打包成apk文件,完成了一个简单app的制作,当我正陶醉于可以自己完成一个app的时候突然发现,我的app ...
- 在 SharePoint 2010 中访问数据
转:http://blog.banysky.net/?p=81001 数据访问的关键方法有哪些? | 使用查询类 | 使用 SPQuery | 使用 SPSiteDataQuery | 使用 LINQ ...
- vue中axios调用接口和用node.js跨域
<script>const API_PROXY = 'https://bird.ioliu.cn/v1/?url='import axios from 'axios'export defa ...
- vue中的数据双向绑定
学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...
- Pod中访问外部的域名配置
在实际应用中经常遇到Pod中访问外部域名的状况,在Kubenetes 1.6以上的版本通过配置DNS configmap已经解决,详细的内容可以参考官方的 https://kubernetes.io/ ...
- vue 中全局filter过滤器的配置及使用
在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...
- WebService---Android中访问WebService接口的方法
最近公司有个项目需要从Android平台访问WebService接口,实现向发布的函数传递对象.在网上找了一些资料,发现使用ksoap2可以调用WebService传递对象. 需要引入ksoap ...
随机推荐
- linux下启动jekins报错
进入默认安装目录,执行java -jar jekins.war 启动使用端口号: java -jar jenkins.war --httpPort=8085,即启动完成 这个有个弊端,关闭后下次还得这 ...
- javaweb项目中获取项目名称
request.getServletContext().getContextPath() 增加项目名称是test.那么上面的结果就是/test
- GDI+学习之------色彩与图像
色彩 在GDI+中.色彩是通过Color类来描写叙述的.不是用RGB类.用RGB构造会出错.GDI+中的色彩信息值是由一个32位的数据来表示的,它包含8位alpha值和各8位的R.G.B值,对于alp ...
- oc29--property修饰符
// // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject /* 如果给一个属性同时提供了g ...
- android recovery 主系统代码分析【转】
本文转载自:http://blog.csdn.net/andyhuabing/article/details/9248713 阅读完上一篇文章: http://blog.csdn.net/andyhu ...
- null in JavaScript
C# String.IsNullOrEmpty Javascript equivalent https://stackoverflow.com/questions/5746947/c-sharp-st ...
- C# SuperWebSocket服务端、客户端学习(三)
1.打开VS2012,新建一个windows窗体程序,选择.NET4.0版本 2.添加引用 SuperSocket的dll文件( SuperSocket.Common.dll, SuperSocket ...
- 【BZOJ 2288】 生日礼物
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2288 [算法] 先将这个序列的正负数合并起来,变成一个正负交替的序列 如果新序列的正 ...
- LA4788
贪心 这个贪心不太懂啊 dfs返回子树需要的最小值,然后按需要减消耗排序,然后贪心选取即可. #include<bits/stdc++.h> using namespace std; ty ...
- bzoj2822[AHOI2012]树屋阶梯(卡特兰数)
2822: [AHOI2012]树屋阶梯 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 879 Solved: 513[Submit][Status] ...