如何在 Vue.js 中解决这个代理问题？答案

【问题标题】：How to solve this proxy issue in Vue.js?如何在 Vue.js 中解决这个代理问题？
【发布时间】：2020-02-05 07:40:15
【问题描述】：

在我的父目录中，我有：

client 文件夹，其中包含托管在端口 8080 上的 Vue 应用程序。此应用程序主要具有联系表单。
sever 文件夹，其中包含托管在端口 5000 上的 Node 应用程序。此应用程序的主要目的是发送一封电子邮件，其中包含从前端联系表单收集的信息。

前端 Vue 应用程序上的组件调用后端，如下所示：axios.post('http://localhost:5000', {...})。这个 axios POST 请求然后在后端索引文件中处理，app.post('/', (req, res) => {})。

到目前为止，一切正常。该应用程序仅在我尝试添加代理时才会中断，如下所示：

我直接在客户端目录下创建vue.config.js文件，添加代码：

module.exports = {
    devServer: {
        proxy: {
            '/': {
                target: 'http://localhost:5000',
                ws: true,
                changeOrigin: true
            }
        }
    }
};

我将 axios 请求更新为：axios.post('/', {...})

执行此操作后，我收到错误，WebSocket connection to 'ws://localhost:8080/sockjs-node/381/hc0dun1b/websocket' failed: Invalid frame header

同样，我的目标是为http://localhost:5000 axios 调用创建一个代理。问题是它似乎卡在了端口 8080 中，如错误所示。顺便说一句，我启用了 CORS。

提前感谢您的任何回复。

【问题讨论】：

我认为sockjs 错误可能会误导您。你看到你期望看到的 axios 请求了吗？这反应正确吗？

标签： node.js vue.js axios

【解决方案1】：

您的代理规则告诉它使用 websockets 进行连接，这就是错误的含义。你不能在 websocket 上发帖。从外观上看，将代理设置更改为此应该可以解决问题，

devServer: {
    proxy: 'http://localhost:5000'
}

【讨论】：