VueCLI3.0中的接口代理配置详解

本文由「Vue虚拟实验室」的成员effort撰写，主要介绍使用Vue CLI 3.0创建项目后的配置方法。在此之前，我们讨论了无需编写代码即可进行跨域测试的方法，本节将重点讲解如何通过配置代理来处理跨域问题。

1、为何需要设置接口代理

上图所示的错误信息，对于前端开发者来说应该非常熟悉。????

如果前端应用与后端API服务器不在同一主机上运行，你需要在开发环境中将API请求代理到API服务器。

这句话出自Vue CLI 3.0官方文档。然而，这并非全部真相——即使前端应用和后端API在同一主机上运行，也可能遇到跨域问题。要理解这一点，首先需要了解同源策略。

同源策略

同源策略规定，只有当两个页面的协议、端口（如果指定了）和主机完全相同，它们才被认为是同源的。这通常被称为“协议/主机/端口元组”，简称“元组”。(“元组”是指一组元素组成的整体，如(1,2)为二元组，(1,2,3)为三元组)

根据MDN的解释，同源意味着协议、域名和端口必须完全一致。任何一项不同即视为不同源。不同源之间的资源请求会导致跨域问题。因此，即使前后端位于同一主机上，也可能面临跨域挑战。

那么，在Vue中如何解决这类跨域问题呢？

2、实例演示

假设我们需要将请求从http://localhost:8080/api/books代理到http://www.effort.com/api/book。为此，我们首先需要在项目根目录下创建一个vue.config.js文件，并添加以下代码：

vue.config.js是一个可选配置文件，如果项目根目录（与package.json同级）中存在此文件，则会被@vue/cli-service自动加载。

// Book.vue

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://www.effort.com',
        changeOrigin: true,
        pathRewrite: {'^/api' : ''} // 可选，用于重写请求路径
      }
    }
  }
};

注意事项：

此时，打开浏览器查看请求的Headers，会发现显示的仍是http://localhost:8080/api/books，但实际上请求已被代理到http://www.effort.com/api/book。

常用配置参数说明

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-api-url.com',
        ws: true, // 如果需要代理WebSocket
        changeOrigin: true, // 是否更改原始主机头为目标URL
        pathRewrite: {'^/api' : '/new-path'} // 重写请求路径
      }
    }
  }
};

多规则匹配

devServer: {
  proxy: {
    '/book': {
      target: 'http://www.book.com',
      changeOrigin: true,
    },
    '/user': {
      target: 'http://www.user.com',
      changeOrigin: true,
    }
  }
};

上述配置中，代理规则根据请求路径进行匹配。例如，请求/book/info将匹配到http://www.book.com，而/user/book/list则匹配到http://www.user.com。需要注意的是，一旦某个规则匹配成功，后续规则将不再生效。

若需精确匹配以特定路径开头的请求，可使用正则表达式，如'^/book'、'^/user'。

高级匹配与过滤

除了简单的路径匹配，还可以使用全局模式（如/api/**）或自定义函数来决定是否代理请求：

devServer: {
  proxy: {
    '**': {
      target: 'http://www.effort.com',
      filter: (pathname, req) => pathname.startsWith('/api') && req.method === 'GET'
    }
  }
};

更多关于Vue CLI配置的详细信息，可参考官方文档：Vue CLI 官方文档。

推荐阅读：

• 各种博客平台的代码高亮实现方式
• 无需编码即可实现跨域的技术方案
• 从零开始搭建Vue CLI项目
• 同源策略下的跨域解决方案探索