Vue项目部署测试环境,SockJS-Node跨域问题详解及解决方案
在Vue项目中,使用SockJS-Node进行实时通信时,部署到测试环境后常出现跨域问题。本文分析一个典型案例:本地运行正常,但部署到测试环境(10.181.12.125:30016)后,访问http://localhost:8080/sockjs-node/info?t=xxx
失败,报错SockJS-Node跨域。
该项目使用Vue+Webpack构建。本地开发环境正常,但使用npm run build
打包后,通过Dockerfile执行npm run start
(webpack-dev-server --config build/webpack.dev.conf.js) 部署到测试环境时出现问题。
问题根源在于部署方式错误。npm run start
启动的是Webpack Dev Server,这是一个用于开发环境的本地服务器,监听8080端口,主要用于热更新和调试。它并不知道应用的实际部署地址(10.181.12.125:30016),因此在热更新时仍然尝试访问localhost:8080
,导致地址不匹配,引发跨域错误。
解决方案: 切勿在测试或生产环境中使用npm run start
启动Webpack Dev Server。Webpack Dev Server仅适用于开发阶段。
正确的做法是:使用npm run build
打包应用成静态资源,然后使用Nginx、Apache或其他静态资源服务器来提供这些资源。这些服务器可以正确转发请求,避免跨域问题。 简而言之,需要将构建好的静态文件部署到正式的Web服务器上,而不是继续使用开发服务器。 只有这样才能确保应用在测试和生产环境中正常运行,避免SockJS-Node跨域错误。