Vue —— 进阶 AJAX（解决开发环境 Ajax 跨域问题）

Vue全家桶 系列文章目录

内容	参考链接
Vue2.x - 基础	Vue2.x - 基础
Vue2.x - 进阶（零）	初始化脚手架
Vue2.x - 进阶（一）	refs属性、props配置项
Vue2.x - 进阶（二）	混入 mixin、插件 plugins、样式 scoped
Vue2.x - 进阶（三）	本地存储
Vue2.x - 进阶（四）	组件的自定义事件
Vue2.x - 进阶（五）	全局事件总线、消息订阅与发布
Vue2.x - 进阶（六）	过渡与动画
Vue2.x - 进阶（七）	解决开发环境 Ajax 跨域问题
Vue2.x - 进阶（八）	默认插槽、具名插槽和作用域插槽
Vue2.x - 周边（Vuex、Vue-router）	Vuex、Vue-router
Vue3.0 - 新增	Vue3.0 新增内容
Vue2.x 项目（附源码）	Vue + ElementUI 后台管理项目（附源码）
Vue3.0 项目	Vue3.0 企业级 App

---

Vue 脚手架配置代理

一、方法一（只能代理一个服务器的情况）

1. 配置

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

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

2. 说明

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

3. 实例

1. 准备好 server1.js 服务器文件，当前文件夹下通过在 cmd 中键入 node server1 启动服务器，并在浏览器中打开。

2. vue.config.js 中配置

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

3. App.vue 获取学生的信息。需要提前在终端键入 npm i axios 安装 axios，并导入使用。

    <template>
      <div>
        <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.message);
            }
          );
        },
      },
    };
    </script>

二、方法二（可以代理多个服务器的情况）

1. 配置

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

    module.exports = {
      pages: {
        index: {
          // 入口
          entry: 'src/main.js',
        },
      },
      lintOnSave: false, //关闭语法检查
 
    // 开启代理服务器 (方式二)
    devServer: {
      proxy: {
        '/api1': { //匹配所有以 /api1 开头的请求路径
            target: 'http://localhost:5000', //代理目标的基础路径
            pathRewrite: {'^/demo': ''}, //去掉请求头匹配目标地址
            ws: true, //用于支持 websocket
            changeOrigin: true //用于控制请求头中的 host值
          }
        }
      }
    }

注意：

1. changeOrigin 设置为 true 时，服务器收到的请求头中的 host 为：localhost: 5000
2. changeOrigin 设置为 false 时，服务器收到的请求头中的 host 为：localhost: 8000
3. changeOrigin 默认值为 true

2. 说明

1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
2. 缺点：配置略微繁琐，请求资源时必须加前缀。

3. 实例

1. 准备好 server1.js 和 server2.js 服务器文件，当前文件夹下通过在 cmd 中键入 node server1 启动服务器 server1，通过键入 node server2 启动服务器 server2，并在浏览器中打开。

2. vue.config.js 中配置

	module.exports = {
	  pages: {
	    index: {
	      // 入口
	      entry: 'src/main.js',
	    },
	  },
	  lintOnSave: false, //关闭语法检查
	  
	  // 开启代理服务器 (方式二)
	  devServer: {
	    proxy: {
	      // /api：请求前缀
	      '/demo': {
	        target: 'http://localhost:5000',
	        pathRewrite: {
	          '^/demo': ''
	        }, //去掉请求头匹配目标地址
	        ws: true, //用于支持 websocket
	        changeOrigin: true //用于控制请求头中的 host值
	      },
	      
	      '/test': {
	        target: 'http://localhost:5001',
	        pathRewrite: {
	          '^/test': ''
	        }, //去掉请求头匹配目标地址
	        ws: true, //用于支持 websocket
	        changeOrigin: true //用于控制请求头中的 host值
	      }
	    }
	  }
	}

3. 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/demo/students").then(
	        (response) => {
	          console.log("请求成功了", response.data);
	        },
	        (error) => {
	          console.log("请求失败了", error.message);
	        }
	      );
	    },
	    getCars() {
	      axios.get("http://localhost:8080/test/cars").then(
	        (response) => {
	          console.log("请求成功了", response.data);
	        },
	        (error) => {
	          console.log("请求失败了", error.message);
	        }
	      );
	    }
	  },
	};

三、注意事项

1. 方法一虽然配置简单，但一次只能代理 一个 服务器。方法二一次可以代理 多个 服务器。
2. vue.config.js 中配置的地址是 500x（5050），在 App.vue 中 axios 通过 get 得到的地址是 808x（8080）。
3. 方法二在配置过程中，要对请求头通过正则表达式进行 重写，这样可以去掉 axios 请求地址的请求前缀，才能正确匹配。

不积跬步无以至千里 不积小流无以成江海