Vue项目SockJS-Node跨域报错测试环境解决方案

本文针对Vue项目部署到测试环境(10.181.12.125:30016)后，SockJS-Node出现跨域报错的问题，提供了有效的解决方案。问题根源在于本地开发环境的webpack-dev-server监听的8080端口与测试环境端口不一致。解决方案是避免在测试环境使用`npm run start`，而是使用`npm run build`构建项目，并将生成的静态文件部署到专业的Web服务器（如Nginx、Apache）上，通过Web服务器的反向代理解决跨域问题，从而确保项目在测试环境的正常运行。

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端口冲突。

解决方案： 避免在测试或生产环境使用开发服务器。 正确的部署流程如下：

1. 使用npm run build命令构建项目： 此命令生成用于生产环境的优化后的静态文件。

2. 使用专业Web服务器部署： 将步骤1生成的静态文件部署到专业的Web服务器（如Nginx、Apache等）。 Web服务器将负责提供这些静态资源。 正确配置Web服务器的反向代理或其他必要设置，解决跨域问题。

通过这种方式，前端应用将直接从Web服务器获取资源，不再依赖开发服务器，从而避免端口不一致导致的跨域错误。 切记：npm run start命令仅用于本地开发环境。

今天关于《Vue项目SockJS-Node跨域报错测试环境解决方案》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！