Vue配置代理(解决跨域请求)

news2024/11/10 14:11:28

app.vue

<template>
  <div>
    <button @click="getStudents">获取学生信息</button>
    <button @click="getCars">获取汽车信息</button>
  </div>

</template>

<script>
import axios from 'axios'
export default {
  name: 'App',
  methods:{
    getStudents(){
      axios.get('http://localhost:8080/liners/students').then(
          response => {
            console.log('请求成功了',response.data)
          },
          error=>{
            console.log('请求失败了',error.message)
          }
      )
    },
    getCars(){
      axios.get('http://localhost:8080/linerc/cars').then(
          response => {
            console.log('请求成功了',response.data)
          },
          error => {
            console.log('请求失败了',error.message)
          }
      )
    }
  }
}
</script>

Vue脚手架配置代理:

 vue.config.js

module.exports = {
  pages:{
    index:{
      entry:'src/main.js'
    }
  },
  lintOnSave:false,//关闭语法检查
  //开启代理服务器(方式1)
/*  devServer:{
    proxy:'http://localhost:5000'
  },*/
  
}

  vue.config.js

module.exports = {
  pages:{
    index:{
      entry:'src/main.js'
    }
  },
  lintOnSave:false,//关闭语法检查
  //开启代理服务器(方式1)
/*  devServer:{
    proxy:'http://localhost:5000'
  },*/
  //开启代理服务器(方式2)
  devServer:{
    proxy: {
      '/liners':{
        target:'http://localhost:5000',
        pathRewrite:{'^/liners':''}
      },
      '/linerc':{
        target:'http://localhost:5001',
        pathRewrite:{'^/linerc':''}
      }
    }
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/816000.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2.4g遥控卧室床头氛围灯开发方案

台灯作为我们日常生活的照明工具&#xff0c;不但给我们的生活提供了很大的便利&#xff0c;而且也丰富了我们的世界。随着电子产品的快速发展&#xff0c;家用电器逐渐趋向智能化&#xff0c;台灯也更加智能。智能台灯以2.4g合封芯片为主控芯片&#xff0c;实现遥控器控制台灯…

依托大数据信息技术构建智慧水务系统,推动城市供水快速发展

随着城市化进程的步伐大大变快&#xff0c;城市建设与科学信息技术的融合程度也在不断提升&#xff0c;尤其是大数据信息技术的迅猛发展&#xff0c;为民生工程由信息化向智能化转型提供了条件。以城市的水务系统为例&#xff0c;依托大数据信息技术构建智慧水务系统是智慧城市…

bigemap工程工程行业应用

客户目前主要是需求为使用下载卫星图、等高线、水系、路网等等元素数据做线路规划图 其他信息 客户需要的图中还包含一些农作物以及需要在软件上标注带有箭头的线段&#xff08;不能满足&#xff09; 如下图&#xff1a; 使用场景&#xff1a; 目前主要为制图、规划线路等等…

【mysql】—— 数据类型详解

序言&#xff1a; 本期我将大家认识关于 mysql 数据库中的基本数据类型的学习。通过本篇文章&#xff0c;我相信大家对mysql 数据类型的理解都会更加深刻。 目录 &#xff08;一&#xff09;数据类型分类 &#xff08;二&#xff09;数值类型 1、tinyint类型 2、bit类型 …

Cilium系列-9-主机路由切换为基于 BPF 的模式

系列文章 Cilium 系列文章 前言 将 Kubernetes 的 CNI 从其他组件切换为 Cilium, 已经可以有效地提升网络的性能. 但是通过对 Cilium 不同模式的切换/功能的启用, 可以进一步提升 Cilium 的网络性能. 具体调优项包括不限于: 启用本地路由(Native Routing)完全替换 KubeProx…

Godot在多边形内随机获取点

前言&#xff1a; 我做了一个随机生成器&#xff0c;可以生成游戏道具&#xff0c;之前是矩形比较好算&#xff0c;随着关卡设计我需要多边形的生成方式。 在矩形内获取随机点&#xff1a; func generateRandomCoordinateInRect(pos,size):"""根据范围生成随机…

Reinforcement-Learning

文章目录 Reinforcement-Learning1. RL方法分类汇总&#xff1a;2. Q-Learning3. SARSA算法4. SARSA&#xff08;λ&#xff09; Reinforcement-Learning 1. RL方法分类汇总&#xff1a; &#xff08;1&#xff09;不理解环境&#xff08;Model-Free RL&#xff09;&#xff…

无涯教程-jQuery - outerWidth( margin])方法函数

outerWidth([margin])方法获取第一个匹配元素的外部宽度(默认情况下包括边框和填充)。 此方法适用于可见和隐藏元素。由于父项被隐藏的元素不支持此功能。 outerWidth( [margin] ) - 语法 selector.outerWidth( [margin] ) 这是此方法使用的所有参数的描述- margin - 此…

OpenLayers实战进阶专栏目录,OpenLayers实战案例,OpenLayers6实战教程

前言 本篇作为OpenLayers实战进阶教程的目录&#xff0c;用于整理汇总专栏所有文章&#xff0c;方便查找。 OpenLayers是前端最流行的JS二维地图引擎之一。 反馈建议 OpenLayers系列-交流专区&#xff0c;建议和问题反馈 Openlayers实战进阶 Openlayers实战&#xff0c;O…

SQL-每日一题【1148. 文章浏览 I】

题目 Views 表&#xff1a; 请查询出所有浏览过自己文章的作者 结果按照 id 升序排列。 查询结果的格式如下所示&#xff1a; 示例 1&#xff1a; 解题思路 1.题目要求我们查询出所有浏览过自己文章的作者&#xff0c;结果按照 id 升序排列。 2.我们只需要筛选出 author_id …

消防应急照明设置要求在炼钢车间电气室的应用

摘 要:文章以GB51309—2018《消防应急照明和疏散指示系统技术标准》为设计依据&#xff0c;结合某炼钢车间转炉项目的设计过程&#xff0c;在炼钢车间电气室的疏散照明和备用照明的设计思路、原则和方法等方面进行阐述。通过选择合理的消防应急疏散照明控制系统及灯具供配电方案…

java 企业工程管理系统软件源码+Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis

&#xfeff; 电子招标采购软件 解决方案 招标面向的对象为供应商库中所有符合招标要求的供应商&#xff0c;当库中的供应商有一定积累的时候&#xff0c;会节省大量引入新供应商的时间。系统自动从供应商库中筛选符合招标要求的供应商&#xff0c;改变以往邀标的业务模式。招…

独立站有流量没订单是什么原因呢?怎么解决?

和自带流量的电商平台比起来&#xff0c;外贸独立站自身是没有流量的。独立站卖家要订单&#xff0c;就必须主动去引流。 如果你是1个独立站新手卖家&#xff0c;你很可能遇到过这种问题&#xff1a;跑了一段时间广告&#xff0c;广告费花了几百上千美金&#xff0c;流量来了不…

集合简述

集合ListArrayListLinkedList SetHashSetTreeSet MapHashMapTreeMap 集合与数组的区别 集合 集合是java中的一个容器&#xff0c;可以在里面存放数据&#xff0c;容量可以发生改变 从集合框架结构可以分析得知&#xff1a; 1、集合主要分为Collection和Map两个接口 2、Collecti…

简单版本视频播放服务器V4,layui界面

简单版本视频播放服务器V4 前一个版本内容&#xff0c;可以查看 https://blog.csdn.net/wtt234/article/details/131759154 优化内容&#xff1a; 1.返回列表的优化&#xff0c;优化了原来返回空列表名称的问题 2.前端才有layui优化内容 后端&#xff1a; package mainim…

配置IPv6 over IPv4手动隧道示例

组网需求 如图1所示&#xff0c;两台IPv6主机分别通过SwitchA和SwitchC与IPv4骨干网络连接&#xff0c;客户希望两台IPv6主机能通过IPv4骨干网互通。 图1 配置IPv6 over IPv4手动隧道组网图 配置思路 配置IPv6 over IPv4手动隧道的思路如下&#xff1a; 配置IPv4网络。配置接…

【Golang 接口自动化06】微信支付md5签名计算及其优化

目录 前言 初始方式 代码说明 优化 最终方法 性能对比 参考代码 总结 资料获取方法 前言 可能看过我博客的朋友知道我主要是做的支付这一块的测试工作。而我们都知道现在比较流行的支付方式就是微信支付和支付宝支付&#xff0c;当然最近在使用低手续费大力推广的京东…

ELD透明屏在智能家居中有哪些优点展示?

ELD透明屏是一种新型的显示技术&#xff0c;它能够在不需要背光的情况下显示图像和文字。 ELD透明屏的原理是利用电致发光效应&#xff0c;通过在透明基板上涂覆一层特殊的发光材料&#xff0c;当电流通过时&#xff0c;发光材料会发出光线&#xff0c;从而实现显示效果。 ELD…

企业电子招投标采购系统java spring cloud+spring boot功能模块功能描述+数字化采购管理 采购招投标

​功能模块&#xff1a; 待办消息&#xff0c;招标公告&#xff0c;中标公告&#xff0c;信息发布 描述&#xff1a; 全过程数字化采购管理&#xff0c;打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力&#xff0c;为外…

【深度学习】MAT: Mask-Aware Transformer for Large Hole Image Inpainting

论文&#xff1a;https://arxiv.org/abs/2203.15270 代码&#xff1a;https://github.com/fenglinglwb/MAT 文章目录 AbstractIntroductionRelated WorkMethod总体架构卷积头Transformer主体Adjusted Transformer Block Multi-Head Contextual Attention Style Manipulation Mo…