Vue基础17之配置代理

news2024/11/15 10:02:49

Vue基础17

  • 配置代理
    • 使用node启动两台服务器
      • server1.js
      • server2.js
    • 使用axios发送ajax请求
      • 安装axios库
      • 引入axios库
      • 发送axios请求
        • App.vue
      • 跨域问题解决
        • 代理服务器开启：方式一
        • 代理服务器开启：方式二
          • server1.js
          • server2.js
          • vue.config.js
          • App.vue
      • 总结：Vue脚手架配置代理
        • 方法一
        • 方法二
  • github案例
    • 静态组件

配置代理

使用node启动两台服务器

server1.js

const express = require('express')
const app = express()

app.use((request,response,next)=>{
	console.log('有人请求服务器1了');
	// console.log('请求来自于',request.get('Host'));
	// console.log('请求的地址',request.url);
	next()
})

app.get('/students',(request,response)=>{
	const students = [
		{id:'001',name:'tom',age:18},
		{id:'002',name:'jerry',age:19},
		{id:'003',name:'tony',age:120},
	]
	response.send(students)
})

app.listen(5000,(err)=>{
	if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');
})

server2.js

const express = require('express')
const app = express()

app.use((request,response,next)=>{
	console.log('有人请求服务器2了');
	next()
})

app.get('/cars',(request,response)=>{
	const cars = [
		{id:'001',name:'奔驰',price:199},
		{id:'002',name:'马自达',price:109},
		{id:'003',name:'捷达',price:120},
	]
	response.send(cars)
})

app.listen(5001,(err)=>{
	if(!err) console.log('服务器2启动成功了,请求汽车信息地址为：http://localhost:5001/cars');
})

在这里插入图片描述
在这里插入图片描述
发送Ajax请求的三种方式：1.xmr（new XMLHttpRequest()） 2.jQuery 3.axios 4.fetch

使用axios发送ajax请求

安装axios库

npm i axios

在这里插入图片描述

引入axios库

import axios from ‘axios’

在这里插入图片描述

发送axios请求

App.vue

<template>
  <div class="bg">
    <button @click="getStudents">获取学生信息</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "App",
  methods:{
    getStudents(){
      axios.get('http://localhost:5000/students').then(
          response=>{
            console.log("请求成功了,",response.data)
          },
          error=>{
            console.log("请求失败了，",error.messages)
          }
      )
    }
  }
}
</script>

<style lang="less">

</style>

在这里插入图片描述

跨域问题解决

  1. 跨域：违背了同源策略(协议名、主机名、端口号三者一致)
    过程：localhost:8080 向 localhost:5000 请求数据，localhost:5000也及时响应给8080了，localhost:8080拿到数据了，但是发现跨域了，并没有再请求localhost:5000了
  2. 解决跨域的三种方式
    （1）cors: 通过响应时候加上一些特殊的响应头让浏览器识别（后端操作）
    （2）jsonp：通过script的src属性在引入外部资源时候不受同源策略限制特点实现，但是只能解决get请求，并不常用
    （3）代理服务器：
    在这里插入图片描述
  3. 开启代理服务器的方式：
    （1）nginx 反向代理方式（学习成本高，这里不赘述）
    （2）vue-cli 开启代理服务器
  4. vue-cli开启代理服务器
    devserver-proxy官方文档

代理服务器开启：方式一

vue.config.js:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pages:{
    index:{
      //入口
      entry: 'src/main.js'
    }
  },
  lintOnSave: true,  //关闭语法检查
  //开启代理服务器
  devServer: {
    proxy: 'http://localhost:5000'
  }
})

App.vue:

<template>
  <div class="bg">
    <button @click="getStudents">获取学生信息</button>
  </div>
</template>

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

<style lang="less">

</style>

在这里插入图片描述
缺点：1.只能代理一个服务器 2.若8080自身有的文件，不会再去请求服务器了，直接从自身上找
例子：
在这里插入图片描述
在这里插入图片描述

代理服务器开启：方式二

// 开启代理服务器：方式二
  devServer:{
    proxy:{
      '/view':{
        target:'http://localhost:5000',
        pathRewrite:{'^/view':''}, //路径重写，将/view路径覆盖成空
        ws: true, //用于支持websocket，默认为true
        changeOrigin:true, //用于控制请求头中的host值（是否跨域）,默认为true
      },
      //简写
      '/demo':{
        target:"http://localhost:5001",
        pathRewrite: {'^/demo':''},
      }
    }
  }
server1.js
const express = require('express')
const app = express()

app.use((request,response,next)=>{
	console.log('有人请求服务器1了');
	console.log('请求来自于',request.get('Host'));
	console.log('请求的地址',request.url);
	next()
})

app.get('/students',(request,response)=>{
	const students = [
		{id:'001',name:'tom',age:18},
		{id:'002',name:'jerry',age:19},
		{id:'003',name:'tony',age:120},
	]
	response.send(students)
})

app.listen(5000,(err)=>{
	if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');
})
server2.js
const express = require('express')
const app = express()

app.use((request,response,next)=>{
	console.log('有人请求服务器2了');
	next()
})

app.get('/cars',(request,response)=>{
	const cars = [
		{id:'001',name:'奔驰',price:199},
		{id:'002',name:'马自达',price:109},
		{id:'003',name:'捷达',price:120},
	]
	response.send(cars)
})

app.listen(5001,(err)=>{
	if(!err) console.log('服务器2启动成功了,请求汽车信息地址为：http://localhost:5001/cars');
})
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pages:{
    index:{
      //入口
      entry: 'src/main.js'
    }
  },
  lintOnSave: true,  //关闭语法检查
  // //开启代理服务器:方式一
  // devServer: {
  //   proxy: 'http://localhost:5000'
  // }
  // 开启代理服务器：方式二
  devServer:{
    proxy:{
      '/view':{
        target:'http://localhost:5000',
        pathRewrite:{'^/view':''}, //路径重写，将/view路径覆盖成空
        ws: true, //用于支持websocket，默认为true
        changeOrigin:true, //用于控制请求头中的host值（是否跨域）,默认为true
      },
      //简写
      '/demo':{
        target:"http://localhost:5001",
        pathRewrite: {'^/demo':''},
      }
    }
  }
})
App.vue
<template>
  <div class="bg">
    <button @click="getStudents">获取学生信息</button>
    <button @click="getCars">获取汽车的信息</button>
    <button @click="getLocal">请求本机上的学生文件（不走代理）</button>
  </div>
</template>

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

<style lang="less">

</style>

在这里插入图片描述

总结：Vue脚手架配置代理

方法一

在vue.config.js中添加如下配置：

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

说明：

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

方法二

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

module.exports={
	devServer: {
	   proxy: {
	    '/api1':{
			target: 'http://localhost:5000',  //代理目标的基础路径
			changeOrigin: true,
			pathRewrite:{'^/api1':''}
		 }
		}
	}
}

github案例

静态组件

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

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

相关文章

面向对象设计模式：结构型模式之代理模式

面向对象设计模式：结构型模式之代理模式

一、引入 访问 FB&#xff1a;代理服务器 二、代理模式 aka Surrogate 2.1 Intent 意图 Provide a surrogate (代理) or placeholder for another object to control access to it. 为另一个对象提供一个代理或占位符&#xff0c;以控制对它的访问。代理模式给某一个对象提…
阅读更多...
2023年如何在Google做外贸

2023年如何在Google做外贸

2023年如何在Google做外贸 答案是&#xff1a;利用谷歌SEO获取自然流量促进成交。 随着全球化和数字化的发展&#xff0c;外贸行业越来越重视互联网的渠道拓展。 在Google搜索引擎上做好SEO优化&#xff0c;是吸引国际客户和提高品牌知名度的关键。 本文将探讨2023年如何在…
阅读更多...
【容器运行时】一文理解 OCI、runc、containerd、docker、shim进程、cri、kubelet 之间的关系

【容器运行时】一文理解 OCI、runc、containerd、docker、shim进程、cri、kubelet 之间的关系

参考 docker&#xff0c;containerd&#xff0c;runc&#xff0c;docker-shim 之间的关系Containerd shim 进程 PPID 之谜内核大神教你从 Linux 进程的角度看 DockerRunC 简介OCI和runCContainerd 简介从 docker 到 runCDockershim究竟是什么技术干货&#xff5c;Docker和 Con…
阅读更多...
C# 中的abstract和virtual

C# 中的abstract和virtual

重新理解了下关键字abstract,做出以下总结&#xff1a; 1.标记为abstract的类不能实例化&#xff0c;但是依然可以有构造函数&#xff0c;也可以重载构造函数&#xff0c;在子类中调用 2.abstract类中可以有abstract标记的方法和属性&#xff0c;也可以没有&#xff0c;被标记…
阅读更多...
Linux网络编程学习（网络基础）

Linux网络编程学习（网络基础）

文章目录网络基础浅谈计算机网络背景了解协议网络传输基本流程局域网传输基本流程跨网络的数据传输流程网络基础 浅谈计算机网络背景 ​ 计算机最早是没有网络的&#xff0c;当时想要数据之间交互就需要人来传递&#xff0c;但是这样效率非常低&#xff0c;而且也容易出错&am…
阅读更多...
机器人姿态规划的三种常见方法：欧拉角、角轴和四元数

机器人姿态规划的三种常见方法：欧拉角、角轴和四元数

参考文献&#xff1a; 1. 布鲁诺西西里安诺等[意] 《机器人学&#xff1a;建模、规划与控制》 2. 四元数小总结 - 孤独の巡礼 - 博客园 (cnblogs.com) 3. 基于单位四元数的姿态插补&#xff08;Matlab&#xff09; - 知乎 (zhihu.com) 4. 基于四元数的工业机器人姿态规划与插…
阅读更多...
javaScript基础面试题 --- JS作用域

javaScript基础面试题 --- JS作用域

面试10家公司&#xff0c;得有8家会问到作用域的题。所以说JS的作用域一定要弄清楚&#xff0c;非常重要&#xff01; 1、除了函数之外&#xff0c;JS没有块级作用域 2、作用域链&#xff1a;内部可以访问外部的变量&#xff0c;但是外部不能访问内部变量&#xff0c;如果内部有…
阅读更多...
Docker搭建jenkins(Vue自动化部署)

Docker搭建jenkins(Vue自动化部署)

前言 需要提前准备的条件 Docker环境 一、jenkins镜像 # 查询镜像 docker search jenkins# 下载镜像 # lts稳定版 docker pull jenkins/jenkins:lts#查看镜像 docker images二、启动Jenkins容器 创建挂载文件夹&#xff0c;并且进行文件授予权限 #创建文件夹 mkdir -p /home/j…
阅读更多...
2023年湖北武汉初级、中级工程师职称评审条件和评审流程是什么呢？

2023年湖北武汉初级、中级工程师职称评审条件和评审流程是什么呢？

职称分三个级别&#xff1a;初级、中级、高级&#xff0c;原则是需要一级一级的&#xff0c;但是有的地方可以跨级申报。 一、湖北武汉初级、中级工程师职称评定条件&#xff1a; 助理职称评定条件&#xff1a; 1.大学本科毕业&#xff0c;从事专业技术工作1年以上。 2.大学专…
阅读更多...
Java Web 实战 02 - 多线程基础篇(1)

Java Web 实战 02 - 多线程基础篇(1)

Java Web 实战 02 - 多线程基础篇 - 1一 . 认识线程1.1 概念1.1.1 什么是线程?1.1.2 为什么要有多个线程?1.1.3 进程和线程的区别(面试题)1.2 第一个多线程程序1.3 创建线程1.3.1 继承Thread类1.3.2 实现Runnable接口1.3.3 继承 Thread 类 , 使用匿名内部类1.3.4 实现 Runnab…
阅读更多...
Linux嵌入式开发 | 汇编驱动LED（1）

Linux嵌入式开发 | 汇编驱动LED（1）

文章目录&#x1f697; &#x1f697;Linux嵌入式开发 | 汇编驱动LED&#xff08;1&#xff09;&#x1f697; &#x1f697;初始化IO&#x1f697; &#x1f697;STM32&#x1f697; &#x1f697;使能GPIO时钟&#x1f697; &#x1f697;设置IO复用&#x1f697; &#x1f6…
阅读更多...
3.5多线程

3.5多线程

一.线程的状态1.NEW安排了工作,还未开始行动把Thread对象创建好了,但是还没有调用startjava内部搞出来的状态,与PCB的状态没什么关系2.TERMINATED工作完成了操作系统的线程执行完毕,销毁了,但是Thread对象还在,获取的对象3.RUNNABLE可以工作的,又可以分为正在工作中和即将开始工…
阅读更多...
聊聊内存那些事（基于单片机系统）

聊聊内存那些事（基于单片机系统）

单片机的RAM和ROM单片机的ROM&#xff0c;叫只读程序存储器&#xff0c;是FLASH存储器构成的&#xff0c;如U盘就是FLASH存储器。所以&#xff0c;FLASH和ROM是同义的。单片机的程序&#xff0c;就是写到FLASH中了。而RAM是随机读/写存储器&#xff0c;用作数据存储器&#xff…
阅读更多...
SpringBoot笔记（一）入门使用

SpringBoot笔记（一）入门使用

一、为什么用SpringBootSpringBoot优点创建独立Spring应用内嵌web服务器自动starter依赖&#xff0c;简化构建配置自动配置Spring以及第三方功能提供生产级别的监控、健康检查及外部化配置无代码生成、无需编写XMLSpringBoot缺点人称版本帝&#xff0c;迭代快&#xff0c;需要时…
阅读更多...
电路基础（1）电路模型和电路定律

电路基础（1）电路模型和电路定律

电路中的电压、电流之间具有两种约束&#xff0c;一种是由电路元件决定的元件约束&#xff1b;另一种是元件间连接而引入的几何约束&#xff08;就是拓扑约束&#xff09;&#xff0c;后者由基尔霍夫定律来表达。基尔霍夫定律是集总参数电路的基本定律。 1.电路和电路模型电源又…
阅读更多...
电路模型和电路定律（2）——“电路分析”

电路模型和电路定律（2）——“电路分析”

各位CSDN的uu们你们好呀&#xff0c;好久没有更新电路分析的文章啦&#xff0c;今天来小小复习一波&#xff0c;之前那篇博客&#xff0c;小雅兰更新了电路的历史以及电压电流的参考方向&#xff0c;这篇博客小雅兰继续&#xff01;&#xff01;&#xff01; 电阻元件 电压源和…
阅读更多...
FFMPEG 安装教程windowslinux(CentOS版)

FFMPEG 安装教程windowslinux(CentOS版)

ps: 从笔记中迁移至blog 版本概述 Windows 基于win10 Linux 基于CentOS 7.6 一.Windows安装笔记 1.下载安装 https://ffmpeg.org/download.html 2 解压缩&#xff0c;拷贝到需要目录&#xff0c;重命名 3 追加环境变量 echo %PATH%setx /m PATH "%PATH%;F:\dev_tools\…
阅读更多...
用C/C++制作一个简单的俄罗斯方块小游戏

用C/C++制作一个简单的俄罗斯方块小游戏

用C/C制作一个简单的俄罗斯方块小游戏 用C/C制作一个简单的俄罗斯方块小游戏 0 准备1 游戏界面设计 1.1 界面布局1.2 用 EasyX 显示界面1.3 音乐播放 2 方块设计 2.1 方块显示2.2 随机生成一个方块2.3 方块记录 3 方块移动和旋转 3.1 方块的移动3.2 方块的旋转3.3 方块的碰撞和…
阅读更多...
基于 WebSocket、Spring Boot 教你实现“QQ聊天功能”的底层简易demo

基于 WebSocket、Spring Boot 教你实现“QQ聊天功能”的底层简易demo

目录 前言 一、分析 1.1、qq聊天功能分析 1.2、WebSocket介绍 1.2.1、什么是消息推送呢&#xff1f; 1.2.2、原理解析 1.2.3、报文格式 二、简易demo 2.1、后端实现 2.1.1、引入依赖 2.1.2、继承TextWebSocketHandler 2.1.3、实现 WebSocketConfigurer 接口 2.2、…
阅读更多...
LeetCode096不同的二叉搜索树(相关话题：卡特兰数)

LeetCode096不同的二叉搜索树(相关话题：卡特兰数)

目录 题目描述 解题思路 代码实现 进出栈序列理解卡特兰数分析策略 相关知识 参考文章 题目描述 给你一个整数 n &#xff0c;求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种&#xff1f;返回满足题意的二叉搜索树的种数。 示例 1&#xff1a; …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023