前后端分离开发，Vue 如何处理跨域问题？

7 2024-11-27

我们非常重视原创文章，为尊重知识产权并避免潜在的版权问题，我们在此提供文章的摘要供您初步了解。如果您想要查阅更为详尽的内容，访问作者的公众号页面获取完整文章。

查看原文：前后端分离开发，Vue 如何处理跨域问题？

文章来源：

江南一点雨

扫码关注公众号

文章摘要

松哥正在录制TienChin项目视频，该项目使用的是Spring Boot和Vue3技术栈，涵盖多种技术，旨在帮助开发者实现一个完成度超过90%的项目。对于Spring Boot相关教程，读者可以在松哥的公众号后台回复666获取PDF教程链接。

松哥提及前后端分离并不复杂，Java工程师在这种模式下只需专注于编写接口，工作相对之前更为轻松。对于前端工程师而言，使用Vue这类前端框架也并不难。然而，当同一个人需要同时处理前端和后端时，情况就会变得更加困难。许多开发者在尝试松哥的开源项目时，常见的困惑包括前后端的通信方式和跨域问题的解决。

在开发单页面应用（SPA）时，通常会遇到跨域问题，因为前端和后端运行在不同的端口上。但实际上，这种跨域问题可能只在开发环境中存在，在生产环境中通过Nginx部署或直接将前端代码拷贝到后端项目中运行时，跨域问题通常会消失。因此，解决跨域问题时不能采用传统的JSONP或CORS方法，而应该在前端nodejs环境中配置请求转发。

对于使用vue-cli2创建的SPA应用，可以在config目录下的index.js文件中配置请求转发。而对于使用vue-cli3创建的应用，请求转发配置应该在vue.config.js文件中完成。二者在配置方式上略有不同，尤其是在处理websocket请求时。vue-cli3中的请求转发配置需要额外注意HTTP请求代理中的ws属性，正确设置以避免控制台报错。

总结来说，松哥希望通过本文消除开发者在前后端分离开发中对请求对接的疑惑，并鼓励理解后的读者点赞或转发以示支持。