Недействительный CORS с Microsoft Edge и EventSource - PullRequest
Новая
       31

Недействительный CORS с Microsoft Edge и EventSource

0 голосов
/ 01 сентября 2018

Я только что создал новый проект и хочу использовать EventSource. Я бы хотел, чтобы он был совместим с основными браузерами, включая Edge. EventSource не поддерживается Edge, мне пришлось установить polyfill .

Мой клиент - приложение vue cli, работающее по адресу http://localhost:8080/.. Я добавил следующий код в файл main.js: 

// 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);
};

Затем на моем сервере Node.js выполняется следующий код 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);
});

Я уже добавил несколько заголовков CORS, иначе EventSource не будет работать с Chrome. Приведенный выше код прекрасно работает на Chrome, Firefox и Opera (я получаю сообщение каждую секунду). Но Edge выдает мне следующую ошибку: 

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/'

Не понимаю, почему это не работает. Может ли быть проблема с полифилом? Я правильно не импортировал?

Большое спасибо!

1 Ответ

0 голосов
/ 05 сентября 2018

Я бы предложил вам использовать event-source-polyfill . Пожалуйста, включите источник событий polyfill на свою страницу, как показано ниже (удалите предыдущие js-файлы источника событий и eventsource-polyfill): 

require('../node_modules/event-source-polyfill/src/eventsource.js')

Он работает как в IE 11, так и в Edge на моей стороне.

...