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 ...
随机推荐
- 一个简单RPC框架是怎样炼成的(I)——开局篇
开场白,这是一个关于RPC的相关概念的普及篇系列,主要是通过一步步的调整,提炼出一个相对完整的RPC框架. RPC(Remote Procedure Call Protocol)--远程过程调用协议, ...
- AWS OpsWorks新增Amazon RDS支持
AWS OpsWorks是一个应用管理服务. 你可以通过它把你的应用在一个 堆栈中定义成为不同层的集合.每一个堆栈提供了须要安装和配置的软件包信息,同一时候也能部署不论什么在OpsWorks层中定义的 ...
- <转>Openstack Ceilometer监控项扩展
Openstack ceilometer主要用于监控虚拟机.服务(glance.image.network等)和事件.虚拟机的监控项主要包含CPU.磁盘.网络.instance.本文在现有监控项的基础 ...
- hdu 4768 异或运算
http://acm.hdu.edu.cn/showproblem.php?pid=4768 貌似非常多人是用的二分 可是更好的做法貌似还是异或 对于第k个人.假设他接到偶数个传单.那么异或的结果还是 ...
- luogu1984 [SDOI2008] 烧水问题
题目描述 给出水的比热容.冰点和沸点,问将$n$杯有$\frac{1}{n}\mathrm{kg}$的水从冰点加热到沸点所需最小热量.不一定相邻的两杯水间可以无热量损失地热传递至两者温度相同. 题解 ...
- Yslow on Nodejs server
1. 目的:用yslow测试某个页面的性能 2. 需求:返回yslow测试后的数据,显示在页面 方法一. nodejs 需要把网址打包为har格式... 方法二. phantomjs 步骤: 1. 安 ...
- 运行项目psychologicalTest
[mysql] # 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] #设置3306端口 port = 3306 # 设置mysql的安装目录 b ...
- (Go)04.go工作区目录规范及简单例子
一.规范目录结构 D:\project\src\go_dev\day1\example1 二.设置GOPAH环境变量 三.hello world 1.hello world package main ...
- 2205 等差数列(dp)
2205 等差数列 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 钻石 Diamond 题目描述 Description 等差数列的定义是一个数列S,它满足了(S[i] ...
- 前端常见面试题总结part2
今天总结了几道,感觉非常有意思的题,有感兴趣的可以看下,有疑问请留言~ (答案在最后) 考察自执行函数的this指向 审题要细心 var n = 2, obj = { n:2, fn:(functio ...