详解Vue-cli 创建的项目如何跨域请求

深入理解Vue-cli项目跨域请求：从长沙网络推广看解决方案

在现代前端开发中，我们经常需要处理跨域请求的问题。特别是当我们使用Vue-cli创建的项目时，开发服务器可能位于localhost的一个端口，而我们需要访问位于另一个端口的API接口。这时，跨域问题就浮现在我们面前。今天，长沙网络推广分享一种实用的解决方案，希望能给各位开发者带来帮助和参考。

一、问题描述

假设我们的Vue-cli项目运行在localhost:8023上，而我们需要访问的API接口运行在localhost:9000上。由于浏览器的同源策略限制，直接进行跨域请求会遇到问题。

二、分析原因

跨域问题主要源于不同域名之间的访问限制。Vue-cli创建的项目可以利用Node.js的代理服务器功能，实现跨域请求。通过配置代理服务器，我们可以将前端请求转发到后端服务器，从而绕过浏览器的同源策略限制。

三、解决方案

为了解决这个问题，我们可以按照以下步骤进行操作：

1. 在请求的接口地址前加上一个统一的前缀，例如"/api"。这样可以将所有的请求接口都统一归类，方便后续配置代理。假设原先的接口地址为"/form/save"，加上前缀后变为"/api/form/save"。

2. 使用axios作为HTTP客户端进行请求。为了方便管理，我们可以全局配置axios的baseURL属性，例如axios.defaults.baseURL = '/api'，这样就不必在每次请求时都写入完整的URL。

3. 在Vue-cli项目的config目录下的index.js文件中，找到dev配置对象，并添加proxyTable配置项。例如：

```javascript

proxyTable: {

'/api': { //匹配项，这里可以自定义前缀

target: ' //被请求的地址

changeOrigin: true, //改变请求头中的Host为target的值

'^/api': '/' //将前缀'/api'转为'/'，根据实际情况调整匹配规则

}

}

},

```