Vue 脚手架配置代理

一、在 vue.config.js 中添加配置

devServer: {proxy: 'http://localhost:5000'
}

优点：配置简单，请求资源时直接发送给前端（8080）即可
缺点：不能配置多个代理，不能灵活的控制请求是否走代理
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

二、具体代理规则：

module.exports = {devServer: {proxy: {'/api1': { // 配置所有以 /api1 开头的请求路径target: 'http:localhost:5000', // 代理目标的地址changeOrigin: true,pathRewrite: {'^/api1': ''}},'/api2': {target: 'http:localhost:5000',changeOrigin: true,pathRewrite: {'^/api2': ''}},}}
}/*changeOrigin : true(默认) --> 服务器收到的请求头中的 host 为：localhost:5000changeOrigin : false --> 服务器收到的请求头中的 host 为：localhost:8080
*/

优点：可以配置多个代理，且可以灵活的控制请求是否走代理
缺点：配置略微繁琐，请求资源时必须加前缀

三、使用 vue-resource 发送请求（方式和 axios 一样）

安装 vue-resource

npm i vue-resource;

步骤

// 安装之后 VueComponent 对象上面多了 $http 对象
this.$http.get(...)

Vue 脚手架配置代理相关推荐

【Vue2.0】—Vue脚手架配置代理（二十二）
[Vue2.0]-Vue脚手架配置代理(二十二) 方法一方法二
Vue学习记录8，vue脚手架配置代理的两种方式，Github搜索案例，vue-resource，三种插槽，Vuex及搭建Vuex环境，getter和四个map方法的使用，模块化+命名空间
目录 vue脚手架配置代理方法一方法二 Github搜索案例 UserList.vue UserSearch.vue 效果图 vue-resource 插槽默认插槽具名插槽作用域插槽 Vue ...
Vue2（十一）：脚手架配置代理、github案例、插槽
Vue2学习笔记:第十一章一.脚手架配置代理 1.引出问题 2.方式一 3.方式二二.github案例 1.App.vue 2.搜索部分Search.vue 3.显示数据部分List.vue 4. ...
vue cli配置代理解决跨域问题
内容跨域问题解决跨域问题 vue cli配置代理跨域问题是由于违背了同源策略,同源策略规定了协议名.主机名.端口号必须一致我们目前所处的位置是http localhost 8080,我们想向 ...
从实例入手学习使用vue+axios配置代理进行跨域访问百度音乐API
场景如果要使用axios直接进行跨域访问是不可以的,这是就需要配置代理了,为什么要配置代理呢? 原因就是因为客户端请求服务端的数据是存在跨域问题的,而服务器和服务器之间可以相互请求数据,是没有跨域的 ...
React学习笔记4： React脚手架配置代理
方式一在package.json中追加如下配置 "proxy":"http://localhost:5000" 说明优点:配置简单,前端请求资源时可以不加任 ...
react脚手架配置代理解决跨域问题
一.问题描述: 控制台报错,出现跨域问题二.解决方案配置代理: 第一种配置方式: 在package.json中追加如下配置 "proxy":"http://local ...
react脚手架配置代理总结
## 方法一在package.json中追加如下配置 "proxy":"http://localhost:5000" 说明: 1. 优点:配置简单,前端请求资 ...
学好vue靠他就行了——vue脚手架，自定义事件，插槽等复杂内容
博主主页:追求- 本文承接上一篇: 学好vue靠他就行了-vue基础知识与原理(一) 学好vue靠他就行了-vue基础知识与原理(二) 希望各位博主多多关注文章目录 2. vue脚手架,自定义事件, ...

Vue 脚手架配置代理

Vue 脚手架配置代理相关推荐

最新文章

热门文章