Vue脚手架配置代理、安装axios

曾经终败给现在 2024-04-06 09:18 115阅读 0赞

**目录**

准备阶段

准备学生服务器

准备汽车服务器编辑

安装axios

一、Vue脚手架配置代理

代理服务器

Vue脚手架配置代理（一次性可以配置多个）

vue.config.js

App.vue

运行结果

--------------------

## 总结 ##

### 方法一 ###

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

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

优点：配置简单，请求资源时直接发给前端（8080）即可

缺点：不能配置多个代理，不能灵活的控制请求是否走代理

工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

### 方法二 ###

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

![3bdff9849602461196f99ee4a31a55dc.png][]

优点：可以配置多个代理，且可以灵活的控制请求是否走代理（想走代理加前缀，不想走不加）

缺点：配置略微繁琐，请求资源时必须加前缀

##  ##

## 准备阶段 ##

### 准备学生服务器 ###

![2fc83ae83c4a41dd93e04fdb1e08bcbb.png][]

### ![e84c6b38adba42bfa81e0fa2ad3b98fc.png][] ###

### 准备汽车服务器![949b509a2d244f588cb75a666c44439b.png][] ###

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 ###

![f1686d7c972e455399b7792da9181de2.png][]

## 一、Vue脚手架配置代理 ##

比如我们在 http localhost 8080 向 http localhost 5000发送请求想得到数据 就会出现下面的跨域问题，下面我们来解决一下

![62a75a9c2bce4106ad8375ea405ca55a.png][]

### 代理服务器 ###

（粉色） （红色8080代表前端工作人员）（充当中介的作用）

#### ![53bd2d02b4564b3b9b49a3ee0219d33a.png][] ####

### Vue脚手架配置代理（一次性可以配置多个） ###

#### vue.config.js ####

const { defineConfig } = require('@vue/cli-service')
    
    module.exports = defineConfig({
      // transpileDependencies: false
      transpileDependencies: 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>

#### 运行结果 ####

![4c141e5cd2e341a9a32f5a69c2d71742.png][]

![a0f57e7827ff40e3ac47c68200b42548.png][]

[3bdff9849602461196f99ee4a31a55dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9ac3a07c0ff24e88bb9944cc5fe30451.png
[2fc83ae83c4a41dd93e04fdb1e08bcbb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/73fd3c5c72914dc7b1e4a73d56434ecb.png
[e84c6b38adba42bfa81e0fa2ad3b98fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/28276fe58fa54d83be33f945a51151aa.png
[949b509a2d244f588cb75a666c44439b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0ef8d6b7746349f48ac6965e36b0d2d3.png
[f1686d7c972e455399b7792da9181de2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/5e54ac33d1d147d2be30431aecf88b0c.png
[62a75a9c2bce4106ad8375ea405ca55a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/26b3185f429942bfa02428d4724d6766.png
[53bd2d02b4564b3b9b49a3ee0219d33a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/8b88b3962d044b999f81231640679794.png
[4c141e5cd2e341a9a32f5a69c2d71742.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9bcea2d7f7a242b09743a179bbbdd542.png
[a0f57e7827ff40e3ac47c68200b42548.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/3ce06783cdab4812a90fb3d3ca22db14.png