Socket.io + Nodejs + Angular2 + - отсутствует заголовок CORS «Access-Control-Allow-Origin» - PullRequest
Новая
       10

Socket.io + Nodejs + Angular2 + - отсутствует заголовок CORS «Access-Control-Allow-Origin»

0 голосов
/ 29 августа 2018

Я делаю приложение стека MEAN. Для связи между клиентом и сервером я использую несколько HTTP-запросов и веб-сокетов. На локальном хосте работает нормально.

Но тогда, когда я пытаюсь развернуть приложение с локального хоста на конкретный сервер, веб-сокеты больше не работают. Тем не менее, http-запросы работают нормально.

Я получил это предупреждение:

Запрос на перекрестное происхождение заблокирован: одна и та же политика происхождения запрещает чтение удаленный ресурс на http://138.250.31.29/socket.io/?userId=5b7c030dca40486dabaafaaf&EIO=3&transport=polling&t=MM5TZt_. (Причина: отсутствует заголовок CORS «Access-Control-Allow-Origin»).

Чтобы установить соединение, у меня есть два файла на Node.JS:

APP.JS 

const createError = require("http-errors");
const express = require("express");
const path = require("path");
const logger = require("morgan");
const favicon = require("serve-favicon");
const cors = require("cors");

require("./models/db");
require("./config/passport");

const passport = require("passport");
const apiRouter = require("./routes/index");

const corsOptions = {
  origin: "*",
  optionsSuccessStatus: 200
};

const app = express();

app.use(logger("dev"));
app.use(express.json({ limit: "1gb" }));
app.use(express.urlencoded({ extended: false }));
app.use(passport.initialize());
app.use(cors(corsOptions));
app.use("/api", apiRouter);

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"
  );
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  next();
});

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
});

// error handlers
// Catch unauthorised errors
app.use(function(err, req, res, next) {
  if (err.name === "UnauthorizedError") {
    res.status(401);
    res.json({ message: err.name + ": " + err.message });
  }
});

module.exports = app;

WWW 

!/usr/bin/env node

/**
 * Module dependencies.
 */

const app = require("../app");
const debug = require("debug")("sorfml:server");
const http = require("http");
const socketIO = require("socket.io");

/**
 * Get port from environment and store in Express.
 */

const port = normalizePort(process.env.PORT || "3000");
app.set("port", port);

/**
 * Create HTTP server.
 */

const server = http.createServer(app);

/**
 * Bind the socket.IO with the http server
 */
const io = socketIO(server);
io.origins("*:*");

clientsList = {};

/**
 * Socket connection
 */
io.on("connection", socket => {
  console.log("Client connected " + socket.id);
  socket.user_id = socket.handshake.query.userId;
  clientsList[socket.handshake.query.userId] = socket;

  socket.on("disconnect", () => {
    delete clientsList[socket.user_id];
    console.log("Client disconnected: " + socket.id);
  });
});

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on("error", onError);
server.on("listening", onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  const port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== "listen") {
    throw error;
  }

  const bind = typeof port === "string" ? "Pipe " + port : "Port " + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case "EACCES":
      console.error(bind + " requires elevated privileges");
      process.exit(1);
      break;
    case "EADDRINUSE":
      console.error(bind + " is already in use");
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  const addr = server.address();
  const bind = typeof addr === "string" ? "pipe " + addr : "port " + addr.port;
  console.log("Listening on " + bind);
}

На стороне клиента (угловой): 

import * as io from "socket.io-client";


    private socket;
    this.socket = io("ws://138.250.31.29/sorfml_api", { query: "userId=" + userId });

    this.socket.on("sendNotification", data => {
     // Do a function
    });

    this.socket.on("deleteNotificationFromAuthor", data => {
      // Do a function
    });

Я нашел много вопросов об этом на Stackoverflow и Github, но ничто не решило мою проблему.

Я попытался установить происхождение следующим образом (в файле www): 

io.set('origins', '*:*');

или 

io.set('origins', 'http://138.250.31.29:80');

Затем в файле app.js я попытался также добавить дополнительную авторизацию в corsOptions и в app.use (). Но ничего не работает.

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Попробуйте Cors . Пример: 

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

app.use(cors())

Объяснение: вам нужно включить CORS в заголовках http вашего сервера узлов.

0 голосов
/ 29 августа 2018

Полагаю, ваше io.set('origins', ':'); утверждение неверно,

должно быть либо, 

io.set('origins', '*:*');

или 

io.origins('*:*')

Надеюсь, это поможет!

...