首页 > 其他分享 >Vue脚手架配置代理

Vue脚手架配置代理

时间:2023-04-19 20:13:56浏览次数:42  
标签:Vue http 请求 配置 代理 8080 脚手架 localhost

Vue-cli配置代理

在前后端直接配置一个代理服务器,这个代理服务器和前端处于一个位置,当前端向后端请求数据的时候,不会直接访问后端,而是找这台代理,代理收到前端的请求,转发给后端,如果收到后端的响应数据,就把这些数据返回给前端。

方法一

vue.config.js中添加如下配置:

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

请求方法

getStudents() {
//get 8080/students,配置后将请求转给5000端口     
axios.get('http://localhost:8080/students').then(
        response => {
          console.log('请求成功了!', response.data);
        },
        err => {
          console.log('请求失败', err.message);
        }
      )
    },

说明

  1. 优点:配置简单,请求资源时直接发给前端(8080)即可。
  2. 缺点:不能配置多个代理,不能灵活控制请求是否走代理,如果前端工作目录下有请求的路径(重名),则会默认不走代理。
  3. 工作方式:若按照上述配置代理,当请求了前端不存在的资源时。那么该请求会转发给服务器(优先匹配前端资源)。

方法二

编写vue.config.js配置具体代理规则

 devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        // 重写路径,如果不写这个,请求时路径会把/api也带过去
        pathRewrite: {'^/api':''},
        ws: true,//用于支持websocket
        //告诉请求的服务器,请求来自于哪里,ture则撒谎告诉他来自自身服务器5000,fasle则实话实说,来自于8080
        changeOrigin: true//用于控制请求头中的host值
      },
      '/demo': {
        target: 'http://localhost:5001',
        pathRewrite: {'^/demo':''},
      }
    }
  }
  • changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
  • changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
  • changeOrigin默认为true。
    请求方法
getStudents() {
      axios.get('http://localhost:8080/api/students').then(
        response => {
          console.log('请求成功了!', response.data);
        },
        err => {
          console.log('请求失败', err.message);
        }
      )
    },
getCars() {
      axios.get('http://localhost:8080/demo/cars').then(
        response => {
          console.log('请求成功了!', response.data);
        },
        err => {
          console.log('请求失败', err.message);
        }
      )
    }
  }

说明

  1. 优点:可以配置多个代理,且可以灵活的控制请求是都走代理,不走代理则不加配置的代理名,例如http://localhost8080/api/students就是走代理,http://localhost8080/students就是不走代理。
  2. 缺点:配置略微繁琐,请求资源时必须加前缀,指我们配置的代理名,这里是/api

标签:Vue,http,请求,配置,代理,8080,脚手架,localhost
From: https://www.cnblogs.com/cloud0-0/p/17334468.html

相关文章

  • vue项目部署后 nginx配置重定向 大文件报错问题
      删除Nginx缓存文件试试?#rm-rf/usr/local/nginx/proxy_temp  注意proxy_busy_buffers_size是proxy_buffers的两倍,proxy_temp_file_write_size也要比proxy_buffers大。  ......
  • vue2源码-九、异步更新
    异步更新异步更新原因以下情况下:vm.name='123'vm.name='234'vm.name='123'...如果我们频繁的修改一个数据,就会多次触发视图渲染dep.notify->watcher.update这样就会降低性能,因此就需要采用异步更新策略,仅仅在最后执行一次视图更新操作。思路当数据变化时,先......
  • 源码共读|vue2 工具函数
    前言本期源码共读的课程是学习vue2中的工具函数,学习优秀开源项目的代码的写作思路,看看他们在书写代码中都会考虑到那些问题。资源:源码位置:vue/util.tsatmain·vuejs/vue(github.com)学习目标分析源码学习源码中优秀代码和思想分析源码代码使用Typescript编写,......
  • Vue封装的过渡与动画
    Vue封装的过渡与动画作用在插入、更新或移出DOM元素时,在合适的时候给元素添加样式类名。css3实现动画先来复习一下css3是如何实现的。1.准备动画@keyframes动画名{from{transform:translateX(-100%);}to{transform:translateX(0px)......
  • vue3微信公众号商城项目实战系列(9)购物车页面
    本篇显示购物车中的商品,购物车表结构如下,我们通过接口服务抓取登录用户的购物车信息。表名字段功能shoppingcartcart_id(int)购物车编号user_id(int)用户编号goods_id(int)商品编号goods_name(varchar)商品名称photo(varchar)商品图片price(decimal)......
  • Vue3 computed计算属性
    视频7.计算属性与监视1.computed函数与Vue2.x中computed配置功能一致写法import{computed}from'vue'setup(){... //计算属性——简写letfullName=computed(()=>{returnperson.firstName+'-'+person.lastName})//计算属性——......
  • vue利用正则去除富文本的标签和样式
    constremoveHtmlStyle=(html:any)=>{letrelStyle=/style\s*?=\s*?([‘"])[\s\S]*?\1/g;//去除样式letrelTag=/<.+?>/g;//去除标签letrelClass=/class\s*?=\s*?([‘"])[\s\S]*?\1/g;//清除类名letnewHtml="";  if(html){......
  • 动态拨号代理池的应用场景与实现原理解析
    随着互联网的发展和应用场景的不断扩大,数据采集和爬虫技术也日渐成为一项重要的任务。然而,很多网站为了保护自身权益,设置了严格的反爬虫策略,让数据采集变得更加困难。在这种情况下,动态拨号代理池成为了解决方案之一。动态拨号代理池的应用场景动态拨号代理池主要在以下几方......
  • 如何使用动态拨号代理提高网络爬虫成功率
    随着互联网的不断发展和数据的爆炸增长,越来越多的企业和个人开始使用网络爬虫来获取所需的数据。然而,在爬虫过程中,很容易被目标站点识别并拦截,导致数据抓取失败。为了解决这一问题,许多开发者开始使用动态拨号代理技术来提高网络爬虫的成功率。动态拨号代理是一种常用的技术......
  • 运行一个vue项目vite-electron-vue
    必备软件:1)visualstudiocode2)nodejs18.16.03)yarn下载源码:项目fork自https://gitee.com/mywink/vite-electron.gitgitclonehttps://gitee.com/panie/vite-electron-vue.git运行项目1/采用vscode打开文件夹2/查看一下各种命令的版本$node-vv18.16.0$......