Vue前后端分离：不同端口部署与axios跨域处理

"本文档介绍了如何在Vue项目中实现前后端分离时不同端口的通信。前端使用Vue运行在8080端口，后端则使用Node.js运行在8085端口。主要关注了跨域问题的解决策略和axios在前端的配置，以及如何通过proxyTable在Vue的配置文件(config/index.js)中设置代理转发请求到后端服务器。 首先，我们了解一个关键的服务器端代码片段，这段位于`node_proxy/index.js`文件中，负责处理跨域请求。通过`app.all()`函数设置了CORS（跨源资源共享）的响应头，允许来自任何来源的请求，但确保了安全的跨域访问。如果没有这些设置，浏览器可能会抛出"Origin is not allowed by Access-Control-Allow-Origin"错误，这是由于默认情况下浏览器不允许跨域请求。 在前端部分，开发者使用axios进行API的调用。在`Card`组件的`mounted()`生命周期钩子中，发起GET请求到`HOST`，这里通常就是`/seller`路径，实际的目标是后端的8085端口。当请求成功时，数据被解析并赋值给`sed`变量。 然而，前端不能直接向8085端口发送请求，因为它们运行在不同的端口上。因此，Vue的`proxyTable`在`config/index.js`文件中起到了至关重要的作用。这里的配置将前端的请求路径`'/seller'`代理到后端服务器`'http://localhost:8085'`。`changeOrigin: true`选项使得axios能够正确地处理跨域请求，而`pathRewrite`用于重写前端发送的路径，确保后端能够接收到正确的请求。 总结起来，这篇文章提供了Vue项目中如何通过设置CORS、使用axios的代理配置以及Vue的proxyTable来实现前后端不同端口通信的方法。这对于开发过程中处理跨域问题和高效集成后端服务至关重要。开发者在实践中应当注意测试和调整这些配置，以确保应用程序的稳定性和性能。"