本文是一篇关于Vue 3.x与axios跨域方案的踩坑指南。对于正在学习或使用Vue 3.x进行项目开发的朋友们，本文将为你提供一些有价值的参考。
一、背景介绍
在开发过程中，我们经常需要面对跨域问题。特别是在前端工程化日益盛行的今天，前后端分离已成为主流开发模式。为了提升开发效率和体验，前端往往会搭建一个小型的服务器，如webpack的devServer。这时，前端调用后端接口时就会遇到跨域问题。本文将重点讨论Vue 3.x和axios在处理跨域问题时的解决方案及遇到的坑。
二、开始填坑
跨域问题其实并不难解决，网上有很多教程可以借鉴。但为了文章的完整性，本文将详细介绍如何配置Vue 3.x来实现跨域。
在Vue 3.x项目中，如果你使用的是Vue CLI工具构建的项目，你可以在根目录下创建vue.config.js配置文件来设置devServer的代理配置。以下是具体的配置示例：
假设你的devServer地址是localhost:8080/，需要代理的地址是localhost/index/phpinfo.php（一个用于测试跨域的PHP文件，返回'ok'）。你需要配置的proxy对象如下：
```javascript
devServer: {
proxy: {
'/index': {
target: '
changeOrigin: true,
pathRewrite: {
'^/index': ''
}
}
}
}
```
大部分教程到这里就结束了，但为了让读者更好地理解这里的配置是如何起作用的，我们扩展一下讲解。这里使用的底层原理是http-proxy-middleware这个npm模块。这个模块通过匹配请求的path来决定哪些请求需要被代理到指定的主机地址。在我给出的配置示例中，'/index'这个key就是用来匹配path的。一旦请求的路径匹配到这个key，就会把请求转发到target字段指定的主机地址去。简单来说，这个key就是用来决定哪些请求需要进行代理的。
三、总结与展望
在Vue中使用axios进行网络请求时，我们可以利用这些代理设置。在Vue项目中集成axios，有两种主要方法：一是将其添加到Vue的原型中。我更推荐使用第二种方法，即通过npm安装axios和vue-axios，然后在Vue实例中导入和使用它们。这使得我们在Vue中更方便地使用axios进行网络请求。
假设我们的代理设置已经将某些路径（如/index/phpinfo.php）的访问转发到本地服务器的相应路径。在这种情况下，如果我们想在Vue实例中使用axios访问这个路径，我们只需要在axios的get或post请求中指定相对路径即可。例如，我们可以使用this.axios.get('/index/phpinfo.php')来发起一个GET请求。
在实际使用中可能会遇到一些问题。即使配置了代理，有时请求可能仍然无法正常工作。这可能是由于代理配置与访问路径不匹配，或者虽然匹配了但转发的地址不正确等问题导致的。还需要确保我们在使用axios时遵循了正确的使用方法。同时也要注意，即使返回的response中的url显示的是本地主机地址，但实际的数据可能已经成功从新的地址返回。这是因为我们实际上是在访问本地主机，但请求已经被代理到一个新的地址。对于跨域问题，有一些解决方案如Nginx反向代理跨域、JSONP和CORS等可以在后续和解决。
