Конфигурация CORS в узле express и socket.io Нет «Access-Control-Allow-Origin» - PullRequest
Новая
       8

Конфигурация CORS в узле express и socket.io Нет «Access-Control-Allow-Origin»

0 голосов
/ 01 июня 2018

Мой API размещен на Heroku, а Angular webAPP на другом сервере.У меня проблема при интеграции socket.io в API, мои вызовы API не работают, и я получаю ошибку 503, вызванную неправильной конфигурацией CORS?

app.js (Node.js /Экспресс размещен на сервере heroku) 

var express = require('express');
var app = express();

var port = process.env.PORT || 8080;
//var port = 3000;

// Notification Real Time 
// http://4dev.tech/2017/12/tutorial-creating-a-realtime-notification-system-in-angular-and-nodejs/
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io').listen(server);
io.set("origins", "*:*");

var socket_port = process.env.PORT || 8000;
server.listen(socket_port);
//server.listen(8000);

io.on('connection', function(socket) {
  socket.on('create notification', function( data ) {
    socket.broadcast.emit('new notification', data);
  });
});

/* ... more code ...*/

app.listen(port, ()=> {
    console.log('Node/Express: \x1b[32m%s\x1b[0m', 'online - port: '+ port);
});

В консоли Chrome отображается ошибка:

ОПЦИИ https://myapp -backend.herokuapp.com / login 503 (служба недоступна) Не удалось загрузить https://myapp -backend.herokuapp.com / login : Ответ на предпечатный запрос не проходит проверку контроля доступа: заголовок «Access-Control-Allow-Origin» отсутствуетприсутствует на запрашиваемом ресурсе.Поэтому для источника 'http://my -domain.com ' доступ запрещен.Ответ имеет HTTP-код состояния 503

РЕДАКТИРОВАТЬ

Если установлено server.listen(8000); Ошибка 404:

GET https://myapp -backend.herokuapp.com / socket.io /? EIO = 3 & transport = polling & t = MEyiNar 404 (не найдено)

, затем:

Не удалось загрузить https://myapp -backend.herokuapp.com / socket.io /? EIO = 3 & transport = polling & t = MEyiNar : значение заголовка «Access-Control-Allow-Origin» в ответе не должно быть подстановочным знаком'*', когда режим учетных данных запроса - «включить».Следовательно, происхождение 'http://my -домен ' не разрешено.Режим учетных данных запросов, инициированных XMLHttpRequest, управляется атрибутом withCredentials.

UPDATE

Он отлично работает с этой конфигурацией, возникла проблема с портами 

// Notification Real Time 
// http://4dev.tech/2017/12/tutorial-creating-a-realtime-notification-system-in-angular-and-nodejs/
var io = require('socket.io')(server);
// io.set("origins", "*:*");

io.on('connection', function(socket) {
  socket.on('create notification', function( data ) {
    socket.broadcast.emit('new notification', data);
  });
});
// var socket_port = process.env.PORT || 8080;
// server.listen(socket_port);
//server.listen(8000);

Ответы [ 2 ]

0 голосов
/ 01 июня 2018

Браузер использует OPTIONS метод проверки нескольких CROS.(Например, какие методы разрешены) 

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

 // Add this
 if (req.method === 'OPTIONS') {

      res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, OPTIONS');
      res.header('Access-Control-Max-Age', 120);
      return res.status(200).json({});
  }

  next();

});

Проверьте MDN для получения полной информации о методе OPTIONS.

РЕДАКТИРОВАТЬ: Я простозаметил, вот еще одна ошибка, что это приложение использует два разных порта локально, но в Heroku вы получите только один порт.

EDIT 2: Проблема с портом была исправлена ​​пользователем, и этоответ содержит фактический ответ на вопрос.

0 голосов
/ 01 июня 2018

Любой метод HTTP, который может иметь последствия для пользовательских данных, сначала отправит запрос HTTP методом OPTIONS.Ваш домен перекрестного происхождения должен отправлять пользовательский заголовок вместе, и сервер, принимающий запрос перекрестного происхождения, должен принимать этот заголовок.

Независимо от того, какой у вас фактический запрос, он не будет допущен до тех пор, пока запрос OPTIONS не сможет успешно завершиться.

Например, http://my-domain.com может сначала добавить эти заголовки к запросу: 

Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-CUSTOM-HEADER, Content-Type

И https://myapp-backend.herokuapp.com/login должен иметь эту спецификацию использования: 

Access-Control-Allow-Origin: http://my-domain
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: X-CUSTOM-HEADER, Content-Type
Access-Control-Max-Age: 86400

Readо предварительных запросах здесь: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

...