开发环境配置代理，版本为5.x的vue-cli在代理sse协议连接时，和后端服务无法建立连接。但是在vue-cli4.x的版本时能代理成功

Gitsifu commented 1 year ago

Version

5.0.8

Reproduction link

none

Environment info

chrome版本 108.0.5359.124（正式版本） (x86_64)

Steps to reproduce

能建立连接，但是后端发送过来的数据无法接收。（本人已在版本vue-cli4.x同样的配置和代码，运行时能连接和接收消息成功的）

代码如下：

demo.vue

<template>
    <div>
        sse demo
    </div>
</template>
<script>
export default {
    data() {
        return {}
    },
    mounted() {
        this.connectSSE()
    },

    methods: {
        connectSSE() {
            if (window.EventSource) {
                // 这样写不会走代理，能成功
                // let source = new EventSource('http://192.168.0.122:8080'  + "/sse/connect/" + "CheckPoint-Test-06");
                // 走代理，不会成功
                let source = new EventSource('/api' + "/sse/connect/" + "CheckPoint-Test-06");
                /**
                 * 连接一旦建立，就会触发open事件
                 * 另一种写法：source.onopen = function (event) {}
                 */
                source.addEventListener(
                    "open",
                    function (e) {
                        //
                        console.log("建立连接。。。");
                    },
                    false
                );

                /**
                 * 客户端收到服务器发来的数据
                 * 另一种写法：source.onmessage = function (event) {}
                 */
                source.addEventListener("message", function (e) {
                    console.log("SSE消息：", e.data);
                });

                /**
                 * 如果发生通信错误（比如连接中断），就会触发error事件
                 * 或者：
                 * 另一种写法：source.onerror = function (event) {}
                 */
                source.addEventListener(
                    "error",
                    function (e) {
                        if (e.readyState === EventSource.CLOSED) {
                            console.log("连接关闭");
                        } else {
                            console.log(e);
                        }
                    },
                    false
                );
            } else {
                console.log("你的浏览器不支持SSE");
            }
        }
    }
}
</script>

vue.config.js

module.exports = {
  devServer: {
    host: "0.0.0.0",
    port: 8083,
    proxy: {
      '/api': {
        target: 'http://192.168.0.122:8080',
        changeOrigin: true,
        pathRewrite: {
          "^/api": ''
        }
      },
    }
  },
}