开发环境配置代理，版本为5.x的vue-cli在代理sse协议连接时，和后端服务无法建立连接。但是在vue-cli4.x的版本时能代理成功 #7348
Description
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": ''
}
},
}
},
}
What is expected?
能正常代理sse连接
What is actually happening?
无法成功代理sse协议连接