[JavaScript知识库]Vue请求外部资源，配置代理

根据代理的特点，常用的代理可以大致分为两种

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

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  //关闭语法检查
  lintOnSave: false,
  //开了一个8080服务器  1

  devServer: {
     proxy: "http://localhost:5000",
   },
});

在需要请求数据的地方进行配置，我们最常用的就是axios来配置代理

1.引入 npm i axios?

2.在需要的地方调用

//调用axios库 
import axios from 'axios'

3.开始配置代理，根据请求的接口不同，有get和post两种

//GET
axios.get('http://localhost:8080/api1/students').then(
				response=>{
					console.log('请求成功了',response.data)
				},
				error=>{
					console.log('错误了',error.message)
				}
			)

//POST
axios.post('http://localhost:8080/api1/students').then(

				response=>{
					console.log('请求成功了',response.data)
				},
				error=>{
					console.log('错误了',error.message)
				}
			)

这种配置代理的方法，配置简单，请求资源时直接发给前端（8080）即可。缺点就是不能配置多个代理，不能灵活的控制请求是否走代理。工作原理：发送请求时，先在自身找，如果找不到，那么该请求会转发给服务器。

第二种同样在vue.config.js中添加如下配置：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true, //用于控制请求头中的host值  8080
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: false,//用于控制请求头中的host值 5001
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}

?pathRewrite的作用：重写路径后端识别时候把/api替换成空，后端请求的地址中没有/api

? 这次就可以配置多个代理，且可以灵活的控制请求是否走代理。缺点就是配置略微繁琐，请求资源时必须加前缀。