vue EventSource使用及配置请求头、webpack代理配置

EventSourcePolyfill 是EventSource封装的一个方法，可以配置请求头。

官方API：https://developer.mozilla.org/en-US/docs/Web/API/EventSource

一、安装依赖

npm install eventsource

npm install event-source-polyfill

二、不需要加请求头时

const eventSource = new EventSource(url); //我是在vue项目里，普通请求用的axios；这里的url可以直接写接口路径，baseUrl会直接使用axios的baseUrl
eventSource.onopen = function (e) {
     console.log(e, "连接打开时触发");
};
eventSource.onmessage = function (e) {
     console.log(e);
};
eventSource.onerror = function (e) { //断开连接及后端返回错误信息均会触发
     eventSource.close(); // 关闭连接
};

三、需要加请求头时

四、webpack代理配置

 基于webpack的vue项目一般都会配置代理，用于解决接口请求的跨域问题，若想实时收到EventSource的消息，而不是在最后一口气收到，需要配置 vue.config.js里的devServer，设置devServer的compress属性为false