Vue脚手架配置代理、安装axios
目录
准备阶段
准备学生服务器
准备汽车服务器编辑
安装axios
一、Vue脚手架配置代理
代理服务器
Vue脚手架配置代理（一次性可以配置多个）
vue.config.js
App.vue
运行结果
总结
方法一
在vue.config.js中添加如下配置：
devServer:{proxy:"http://localhost:5000"}
优点：配置简单，请求资源时直接发给前端（8080）即可
缺点：不能配置多个代理，不能灵活的控制请求是否走代理
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）
方法二
编写vue.config.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');})
" class="reference-link">
" class="reference-link">准备汽车服务器
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');})
安装axios
一、Vue脚手架配置代理
比如我们在 http localhost 8080 向 http localhost 5000发送请求想得到数据 就会出现下面的跨域问题，下面我们来解决一下
代理服务器
（粉色） （红色8080代表前端工作人员）（充当中介的作用）
" class="reference-link">
Vue脚手架配置代理（一次性可以配置多个）
vue.config.js
const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({// transpileDependencies: falsetranspileDependencies: true,lintOnSave: false, //关闭eslint检查// 开启代理服务器方式一// devServer:{// port: 8080,// proxy: 'http://localhost:5000',// }// 开启代理服务器（方式二）devServer:{proxy:{// 这是一套配置// 'atguigu' 是请求前缀'/atguigu':{target:'http://localhost:5000',// /atguigu/students 当我们转发给5000服务器时，不能带有atguigu// '^/atguigu'正则表达式：匹配所有atguigu的字符串，// 这个地方是一个key：value的形式 将atguigu字符串转化成空白字符串pathRewrite:{'^/atguigu':''},// 用于支持websocket 客户端和服务端的一种通信方式ws:true,// true：不会如实回答自己的端口号是8080 假设对面是5000 我们请求之后这个代理服务器告诉他也是5000 但是其实并不是// false:会如实回答自己的端口号8080， 不会欺骗5000说自己是5000端口// 这个地方是true撒谎好，以防5000端口号做限制不让别的端口访问changeOrigin:true},// 第二套配置'/demo':{target:'http://localhost:5001',pathRewrite:{'^/demo':''},ws:true,changeOrigin:true}}}})
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:5000/students').then(// 不要再找5000要数据了 我们开启了代理服务器 就找8080就行axios.get('http://localhost:8080/atguigu/students').then(// 请求成功时的回调response =>{// console.log('请求成功了',response) 如果想要成功后的数据，这样直接写response是不行的// response只是一个响应对象 response.data 才是真正的data数据console.log('请求成功了',response.data)},// 请求失败时的回调error =>{// error.message 失败的原因console.log('请求失败了',error.message)})},getCars(){axios.get('http://localhost:8080/demo/cars').then(response =>{console.log('请求成功了',response.data)},error =>{console.log('请求失败了',error.message)})}}}</script>
运行结果
曾经终败给现在
分手后的思念是犯贱
ゞ 浴缸里的玫瑰
我就是我
还没有评论，来说两句吧...