Vue 3.x axios如何解决跨域问题，有哪些常见坑点需要注意？

本文共计1222个文字，预计阅读时间需要5分钟。

启动+最近实验课上需要重构的一个项目（垃圾堆栈），需增加生成邮件提醒的功能，记录已编写的一个PHP版本的实现，想将PHP写的功能整合成一个服务，然后在前端调用。

缘起

最近实验课上需要重构以前写过的一个项目（垃圾堆），需要添加发生邮件提醒的功能，记得以前写过一个PHP版的实现，所以想把PHP写的功能整理成一个服务，然后在前端调用。但是这个项目是JavaWeb，也就是说我需要面对跨域的问题。不过本篇文章，讲的并不是如何解决这样的跨域问题，而是我在找如何解决这个问题的路上遇到的坑。

其实，在前端工程化大行其道的现在，前后端已经分离开来，前端为了提高工作流效率往往自己开一个小型的服务器，就比如webpack.devServer。这样在前端调用后端接口的时候必然会面临跨域的问题，

如题，Vue3.x + axios 跨域方案 就是解决这里的跨域问题。这里的跨域是基于webpack的devServer的代理功能（proxy）来实现开发环境中的跨域，也就是说本篇所讨论的并不能解决生产环境下的跨域问题，因为webpack.devServer是DevDependencies，一旦打包上线，这个proxy代理就会失效。但是这并不妨碍我们开发中使用跨域来提高开发效率和体验。