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

Question

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

第一个错误是：

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

我可以通过编辑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（未找到）

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

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

Answer 1

在我在vue.config.js 文件中设置为devServer.before 的函数中，我在与我的devSever 相同的端口上使用Socket.io 创建了我自己的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, configure } = require('./server')

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