1.1 应用代理服务器

1.1.1 形式一

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

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

阐明：

  1. 长处：配置简略，申请资源时间接发给前端（8080）即可。
  2. 毛病：不能配置多个代理，不能灵便的管制申请是否走代理。
  3. 工作形式：若依照上述配置代理，当申请了前端不存在的资源时，那么该申请会转发给服务器 （优先匹配前端资源）

1.1.2 形式二

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

module.exports = {    devServer: {        proxy: {            '/api1': {                // 匹配所有以 '/api1'结尾的申请门路                target: 'http://localhost:5000',// 代理指标的根底门路                changeOrigin: true,                pathRewrite: {'^/api1': ''}            },            '/api2': {                // 匹配所有以 '/api2'结尾的申请门路                target: 'http://localhost:5001',// 代理指标的根底门路                changeOrigin: true,                pathRewrite: {'^/api2': ''}            }        }    }}/*changeOrigin设置为true时，服务器收到的申请头中的host为：localhost:5000changeOrigin设置为false时，服务器收到的申请头中的host为：localhost:8080changeOrigin默认值为true*/

阐明：

  1. 长处：能够配置多个代理，且能够灵便的管制申请是否走代理。
  2. 毛病：配置稍微繁琐，申请资源时必须加前缀。

1.2 Vue 我的项目中罕用的 2 个 Ajax 库

1.2.1 Axios

  1. 阐明：通用的 Ajax 申请库，官网举荐，应用宽泛
  2. 装置：npm install axios

  3. 应用步骤：

    1. 引入

      import axios from "axios";

    2. 应用

      axios.get("http://localhost:8080/api/students").then(    (response) => {        console.log("申请胜利了", response.data);    },    (error) => {        console.log("申请失败了", error.message);    });

1.2.2 vue-resource

Vue 插件库，Vue 1.x 应用宽泛，官网已不保护