I just set up a fresh new project and I want to use EventSource. I would like it to be compatible with the main browsers, including Edge. EventSource being not supported by Edge, I had to install a polyfill.
My client is a vue cli application running at the address http://localhost:8080/. I added the following code in the main.js file:
// Client - main.js
import '@babel/polyfill'
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
//Not sure if this one is necessary, so far I got the same result with and without it.
require('../node_modules/eventsource/lib/eventsource.js');
//polyfill for Edge
require('../node_modules/eventsource/lib/eventsource-polyfill.js');
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
var source = new EventSource(
'http://localhost:3000/',
{withCredentials: true}
);
source.onmessage = function(e) {
var jsonData = JSON.parse(e.data);
console.warn("My message: " + jsonData.msg);
};
Then, the following code is running on my Node.js server at http://localhost:3000/:
//Server
var express = require("express"),
app = express(),
bodyParser = require('body-parser');
app.use(express.static(__dirname + '/'));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.get('*', function(req, res){
res.writeHead(200, {
'Connection': 'keep-alive',
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
"Access-Control-Allow-Origin": "http://localhost:8080",
"Access-Control-Expose-Headers": "*",
"Access-Control-Allow-Credentials": true
});
setInterval(function(){
const date = new Date();
const data = date.getTime()
console.log('writing ' + data);
res.write('data: ' + JSON.stringify({ msg : data }) + '\n\n');
}, 1000);
});
var port = 3000;
app.listen(port, function() {
console.log("Listening at Port " + port);
});
I've already added some CORS headers, or EventSource wouldn't work on chrome. The code above works great on Chrome, Firefox and Opera (I receive a message every second). But Edge gives me the following error:
SEC7120: [CORS] The origin 'http://localhost:8080' did not find 'http://localhost:8080' in the Access-Control-Allow-Origin response header for cross-origin resource at 'http://localhost:3000/'
I don't get why it doesn't work. Could there be a problem with the polyfill? Have I not imported it correctly?
Thanks a lot!
