Webpack 开发服务器 sockjs-node 返回 404 错误

编程问答 2022-05-22

问题描述

我正在使用我使用 vue-cli 创建的 webpack 运行一个简单的 Vue 应用程序。当我使用 npm run serve 运行开发服务器时，它在使用 sockjs-node 时在客户端控制台中显示了几个错误。我相信这个模块被 webpack 用于热重载（HMR）。

第一个错误是：

从源 'http://localhost:8080' 访问 XMLHttpRequest at 'http://192.168.1.4:8080/sockjs-node/info?t=1615330207390' 已被 CORS 策略阻止：没有 'Access-请求的资源上存在 Control-Allow-Origin' 标头。

我可以通过编辑 devServer 中的 vue.config.js 以两种方式解决此问题。第一种方法是通过设置 public: 'localhost:8080';第二种是通过设置 headers: {'Access-Control-Allow-Origin': 'http://192.168.1.4:8080','Access-Control-Allow-Credentials': 'true'}。

在这两种情况下，我都会看到以下两个错误：

POST http://localhost:8080/sockjs-node/690/qvgqwbdo/xhr_streaming?t=1615330686134 404（未找到）

GET http://localhost:8080/sockjs-node/690/zympwfsc/eventsource 404（未找到）

如何解决这些错误以便热重载器连接？

解决方法

在我在 devServer.before 文件中设置为 vue.config.js 的函数中，我使用 Socket.io 在与我的 devSever 相同的端口上创建了自己的 websocket。当函数返回时，devServer 无法将该端口用于 websocket，因此无法启动 sockjs-node。因此，当前端客户端尝试连接到 devServer 时，请求将转到我的套接字，而不是 devServer 套接字，并且它忽略了它们。因此会出现 404 错误。

这是我的原始代码：

// server.js
const { createServer } = require('http')
const io = require('socket.io')
const addSocketEvents = require('./socket-api')

const port = process.env.PORT || 8080

module.exports = {
    port,configure(app) {
        // `app` is an instance of express

        // add the websockets
        const httpServer = createServer(app)
        socket = io(httpServer,{
            path: '/socket-api'
        })
        addSocketEvents(socket)

        // starts the server
        // cannot use app.listen() because that will not start the websockets
        httpServer.listen(port)
    }
}

// vue.config.js
const { port,configure } = require('./server')

module.exports = {
    devServer: {
        before: configure,public: `localhost:${port}`,},}

为了解决这个问题，我需要允许 devServer 使用 sockjs-node 的原始端口，并在不同的端口上启动我的套接字。但是，因为我需要在生产中使用相同的端口（由于我当前的托管服务提供商的限制），所以我只希望我的套接字在运行 devServer 时使用不同的端口。为此，我只需创建一个不同的 httpServer 并在不同的端口上启动它，然后在 devServer 配置中为该端口创建一个代理。在我的 configure 函数中，我只是检查它是在 dev 还是 prod 中运行，然后采取相应的行动。

我的生产服务器是一个简单的 express 实例，它在创建后调用相同的 configure 函数。这让我可以将所有启动代码放在一个地方。

这是我的新代码：

// server.js
const { createServer } = require('http')
const io = require('socket.io')
const addSocketEvents = require('./socket-api')

const port = process.env.PORT || 8080
const proxyPort = 8081

module.exports = {
    port,proxyPort,configure(app) {
        // `app` is an instance of express

        // add the websockets
        let httpServer,socketPort
        if (process.env.NODE_ENV === 'development') {
            httpServer = createServer()
            socketPort = proxyPort
        } else {
            httpServer = createServer(app)
            socketPort = port
        }

        // adds the socket-api to be used via websockets
        socket = io(httpServer,{
            path: '/socket-api'
        })
        addSocketEvents(socket)
        
        // starts the server
        httpServer.listen(socketPort)
    }
}

// vue.config.js
const { port,proxy: {
            '/socket-api': {
                target: `http://localhost:${proxyPort}`,ws: true
            }
        }
    },}
vue-cliwebpack-dev-serverwebpack-hmr