Vue项目部署测试环境,SockJS-Node跨域问题及解决方案
在Vue项目开发中,本地环境运行良好,但部署到测试环境(10.181.12.125:30016)后,却出现SockJS-Node跨域报错,错误信息指向http://localhost:8080/sockjs-node/info?t=xxx路径访问失败。这是因为本地构建后,使用npm run start命令启动了开发服务器(webpack-dev-server),该服务器监听本地8080端口。 然而,实际部署地址为10.181.12.125:30016,端口不一致导致跨域。
问题关键在于开发服务器(webpack-dev-server)仅适用于本地开发,用于热更新等功能,它并不知道实际部署地址。 因此,在热更新请求时,它仍然尝试访问localhost:8080,与实际部署服务器的30016端口冲突。
解决方案: 避免在测试或生产环境使用开发服务器。 正确的部署流程如下:
-
使用npm run build命令构建项目: 此命令生成用于生产环境的优化后的静态文件。
-
使用专业Web服务器部署: 将步骤1生成的静态文件部署到专业的Web服务器(如Nginx、Apache等)。 Web服务器将负责提供这些静态资源。 正确配置Web服务器的反向代理或其他必要设置,解决跨域问题。
通过这种方式,前端应用将直接从Web服务器获取资源,不再依赖开发服务器,从而避免端口不一致导致的跨域错误。 切记:npm run start命令仅用于本地开发环境。