Vue项目部署测试环境SockJS跨域问题详解及解决方案
在使用Vue和Webpack构建的项目中,本地开发环境运行良好,但部署到测试环境(10.181.12.125:30016)后,却出现了SockJS-Node跨域报错。 本地请求 http://localhost:8080/sockjs-node/info?t=xxx 正常,但部署后则失败。项目打包后,通过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。因此,当页面请求SockJS-Node时,由于请求地址与webpack-dev-server监听端口不符,导致跨域错误。
解决方案:
避免在测试或生产环境使用 npm run start 命令。 npm run start 仅适用于本地开发。 测试和生产环境应使用Nginx或其他静态资源服务器(如Apache)来提供打包后的静态资源。
npm run build 命令生成用于生产环境的静态文件,这些文件应由Nginx或其他服务器托管,而非webpack-dev-server。 这样,所有请求都将指向正确的服务器地址(10.181.12.125:30016),从而解决跨域问题。