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

Question

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

第一个错误是：

Access to XMLHttpRequest at 'http://192.168.1.4:8080/sockjs-node/info?t=1615330207390' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我可以通过编辑 vue.config.js 中的 devServer 以两种方式解决这个问题。第一种方法是设置 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 (Not Found)

GET http://localhost:8080/sockjs-node/690/zympwfsc/eventsource 404 (Not Found)

如何解决这些错误以便热重新加载程序能够连接？

Answer 1

在我的 vue.config.js 文件中设置为 devServer.before 的函数中，我在与我的 devSever 相同的端口上使用 Socket.io 创建了我自己的 websockets。当函数返回时，devServer 无法将该端口用于 websockets，因此无法启动 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, configure } = require('./server')

module.exports = {
    devServer: {
        before: configure,
        public: `localhost:${port}`,
        proxy: {
            '/socket-api': {
                target: `http://localhost:${proxyPort}`,
                ws: true
            }
        }
    },
}

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

Webpack dev server sockjs-node returns 404 error

webpack-dev-server

webpack-hmr

vue-cli