Question

在我的父目录中，我有：

一个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。

在此先感谢您的答复。

Answer 1

您的代理规则告诉它使用websockets进行连接，这就是错误的含义。您无法在网络套接字上发布信息。从外观上看，将代理设置更改为此应该可以解决问题，

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

如何解决Vue.js中的代理问题？

1 个答案: