proxyTable的配置
在dev环境下面:
proxyTable: {
'/api': {
target: 'http://api.douban.com/v2', //主域名,以前我都写192.168.2.57:80,这里跨域了
changeOrigin: true, //允许跨域
pathRewrite: {
'^/api': ''
}
//重写路径,其实这里就是和上面的target拼接起来
}
}
以前的老项目里是写成这样的:
proxyTable: {
"/middleware": {
target: "http://192.168.2.57:80",
pathRewrite: {
'^/middleware': '/patient/1116/guangji/middleware' //上下拼接,组成完整的请求路径
},
changeOrigin: true,
}
}
配合axios使用:
//在main.js中:
Vue.prototype.HOST = '/api'
//将api设置成全局属性,然后再给每个请求地址引用一下。
//这里必须这样写,我试了一下如果不在全局注册api的话,它还是会去请求192.168.2.57:8888下面的地址
//在代码里:
this.axios.get(this.HOST + '/movie/in_theaters').then((response) => {
console.log(response);
})
//请求的接口是:http://api.douban.com/v2/movie/in_theaters 拼接起来的
注意:
1.这个方法只是讲了proxyTable应该怎样配置。
2.只能用在开发环境中,生产环境怎么用我还要再研究一下。
3.千万别忘了在main.js中引入api作为全局变量。
proxyTable的配置的更多相关文章
- webpack的proxytable的配置
这个一定不能忘记了/rest/后面的/,否则就是404找不到接口 这样的实现效果是 this.axios.post('/api/delShare', qs.stringify({'Id':Number ...
- vue-cli#2.0 webpack 配置分析
目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-s ...
- 构建:vue项目配置后端接口服务信息
背景 vue-cli脚手架生成的webpack标准模板项目 HTTP库使用axios 一.开发环境跨域与API接口服务通信 整体思路: 开发环境API接口请求baseURL为本地http://loca ...
- 前端如何使用proxyTable和nginx解决跨域问题
最近经常遇到跨域的问题,有时候问题虽然解决了,但是还是会有些模棱两可概念不清,于是在网上看了一些教程结合实际使用,做个笔记. 1.跨域原因 浏览器的限制 跨域(协议/域名/端口的不同) XMLHttp ...
- vue 一些webpack的配置详解
最近一直在忙着做项目 本来想养成一个经常跟新博客的习惯 , 但是实在是太难了 , 每天加班到10点多 .8点能下班都是最好的了 , 小公司真不好待呀 分享一下最近半年的vue心得吧 我的项目是在他的基 ...
- vue proxyTable代理 解决开发环境的跨域问题
如果我们项目请求的地址为 htttp://xxxx.com/a/b/c 可以设置代理为: dev:{ assetsSubDirectory: 'static',// 静态资源文件夹 assetsPub ...
- Vue 项目代理设置的优化
Vue 项目代理设置的优化 Vue 类的项目开发中项目结构基本都是类似于 Vue-cli 生成的方式, 这种方式开发中,最常用到的模式是开启代理进行 mock 调试或远程调试, 也就是使用了 Vue- ...
- Vue全家桶(Vue-cli、Vue-route、vuex)
摘要 学习本篇之前要具备一定的vue基础知识,可以先看一下Vue基础(环境配置.内部指令.全局API.选项.内置组件) 1.Vue-cli Vue-cli是vue官方出品的快速构建单页应用的脚手架,这 ...
- 详解 vue-cli 的打包配置文件代码(给大家写写注释)
一.前言 对于webpack基础不好,node指令不通的童鞋.估计对自己搭建Vue.react脚手架是相当头疼的,有种无从下手的感觉.然而,从头看这2块,耗时太长,而且说实话得练才行,不练练手看不明白 ...
随机推荐
- hdu2876 Connections between cities(LCA倍增)
图不一定联通,所以用并查集找各个联通块的祖先分别建图,之后就和LCA的步骤差不多了 #include<iostream> #include<cstring> #include& ...
- GPIO-FPGA架构
GPIO是一种软件运行期间能够动态配置和控制的通用引脚 有不同的GPIObank,每个GPIO口的bank都会有编号的区分, 每个GPIO口除了通用的输入输出功能以外,还有其他复用功能,例如GPIO5 ...
- [LC] 113. Path Sum II
Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...
- [LC] 77. Combinations
Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. Example: I ...
- CAS 5.3.x 相关信息
CAS 5.3.x 相关信息 单点登录系统 学习网站: https://www.apereo.org/projects/cas 官方网站 https://github.com/apereo/cas-o ...
- mysql中in和exist的区别
mysql中in和exists的区别 -- in写法select * from A where A.id in (select bid from B ) and A.name in (select ...
- 用Microsoft Chart Controls(MSChart)实现曲线图,并支持拖动放大到秒
Microsoft Chart Controls(简称MSChart)控件,给图形统计和报表图形显示提供了很好的解决办法,同时支持Web和WinForm两种方式. MSChart 在.NET 4.0自 ...
- webservice入门程序学习中经验总结
***第一步:创建客户端服务 1)创建一个服务接口 2)创建一个实现类实现接口 3)创建一个方法开启服务 这三步注意点:::实现类上必须添加@WebService标签 :::发布服务的时候用到的函数是 ...
- openpyxl传入表名时不要使用默认的sheet表名
openpyxl传入表名时不要使用默认的sheet表名,会报错 处理:改一下表名即可
- scarce|component|
ADJ-GRADED 缺乏的;不足的;供不应求的If something is scarce, there is not enough of it. Food was scarce and expen ...