详解 Vue-cli 创建的项目如何跨域请求
在本篇文章中，我们将详细介绍 Vue-cli 创建的项目如何跨域请求。跨域请求是指在不同的域名之间进行交互，例如从 localhost:8023 访问 localhost:9000 上的接口。在 Vue-cli 创建的项目中，我们可以利用 Node.js 代理服务器来实现跨域请求。
让我们了解为什么需要跨域请求。在 web 开发中，默认情况下，浏览器会受到同源策略的限制，即只能访问同一个域名下的资源。如果我们需要访问其他域名下的资源，就需要进行跨域请求。跨域请求的方法有很多，通常需要在后台进行配置。但是，在 Vue-cli 创建的项目中，我们可以直接利用 Node.js 代理服务器来实现跨域请求。
那么，如何实现跨域请求呢？我们可以在 config/index.js 文件的 dev 中添加配置项 proxyTable。proxyTable 是一个对象，其中的每一个键都是一个 proxy 的规则。例如，我们可以添加以下配置项：
```
proxyTable: {
'/api': {
target: 'http://127.0.0.1:9000/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
```
这里的 '/api' 是匹配项，target 是被请求的地址。在这个例子中，我们将所有以 '/api' 开头的 URL 转发到 'http://127.0.0.1:9000/'。changeOrigin 属性用于指定是否修改原始的主机名，pathRewrite 属性用于重写 URL。
例如，如果我们需要访问 'http://127.0.0.1:9000/form/save'，我们可以将 URL 改为 '/api/form/save'，然后在 proxyTable 中配置项将其转发到 'http://127.0.0.1:9000/form/save'。
如果我们使用 axios，可以全局配置一个 baseURL，这样就不用挨个儿修改 URL 了。例如：
```
axios.defaults.baseURL = '/api'
```
这样，我们就可以使用 '/api' 作为前缀来访问其他域名下的资源。
在实现跨域请求时，我们需要注意一些细节。例如，我们需要确保目标地址的域名与我们的域名不同，以避免无限循环的请求。此外，我们还需要注意跨域请求的安全问题，例如确保目标地址的身份验证和授权。
Vue-cli 创建的项目可以直接利用 Node.js 代理服务器来实现跨域请求。通过配置 proxyTable，我们可以轻松地实现跨域请求，使我们的应用程序更加灵活和强大。
