Связь через сокет io заблокирована политикой CORS в приложении Node js + Angular

Поэтому я использую простой сервер node.js с экспрессом и socket.io. Когда я пытаюсь связаться с простым клиентом, написанным на javascript, он работает отлично, но когда я пытаюсь создать связь с приложением Angular (используя ngx-socket-io), я получаю следующее сообщение об ошибке:

Access to XMLHttpRequest at 'http://localhost:5000/socket.io/?EIO=3&transport=polling&t=NQFEnVV' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Это сервер nodejs:

var express = require('express');
var app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = process.env.PORT || 5000;
app.set(port, process.env.PORT);
app.use(express.static('./client/'));

io.on('connection', socket => {
    socket.emit('connection', 'data from server!');
});
 
http.listen(port, () => {
    console.info('App listening on port ' + port);
});

И вот как я реализую socket.io на клиенте Angular:

приложение.модуль.тс :

import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';

const hostname = window.location.hostname;
const url = (hostname === 'localhost') ? `${window.location.protocol}//${hostname}:5000` : undefined;
const config: SocketIoConfig = { url, options: {} };

@NgModule({
  declarations: [...],
  imports: [
    ...
    SocketIoModule.forRoot(config)

класс, использующий сокет io:

constructor(private socket: Socket) { }

    this.socket.on('connection', (data) => {
      console.info('Working ' + data);
    });

Я попытался исправить ошибку CORS с помощью заголовков на стороне сервера, например:

const io = require('socket.io')(server, {
  cors: {
    origin: '*',
  }
});

или

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

но он все еще показывает ту же ошибку.

Я, конечно, использую команду ng serve для запуска своего приложения (работающего на порту 4200), и оно отлично работало 3 месяца назад. (Работа с ng serve, а также с ng build prod).

Вы нашли способ решить эту проблему?

eemilk 06.08.2021 12:19
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
1
6 394
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

попробуй это

const io = require('socket.io')(server, {
    cors: {
      origin: "http://localhost:4200",
      methods: ["GET", "POST"]
    }
  });

вы можете добавлять или удалять моды

также попробуйте добавить это

var cors = require('cors');

app.use(cors());

Все еще не работает, извините:/ Проблема, похоже, связана с Angular или ngx-socket-io

Pazu 23.12.2020 12:58

я обновил ответ, можете ли вы попробовать это тоже и извините, если это тоже не сработает ..

jagjeet 23.12.2020 20:56

То же самое, все еще не работает, я уже испробовал все возможные исправления на стороне сервера, все равно не работает :c

Pazu 24.12.2020 10:45
Ответ принят как подходящий

Проверьте версию socket.io-client в файле angular packaje.json. Если он ниже 3.1.2, вы можете попробовать обновить его с помощью npm install [email protected] --save Также вы можете еще раз проверить серверную часть, посмотрев на это

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http, {
    cors: {
        origins: ['http://localhost:4200']
    }
});

Замените http://localhost:4200 вашей текущей средой в приложении Angular.

Вы спасли мой день! Хорошо работает с socket.io и ngx-socket-io 4.0

Eta 13.04.2021 20:30

Проблема решена, большое спасибо :) Версия ngx-socket-io была выше 3.1.2, но когда я добавил источник cors, как вы показали, все заработало нормально, проблем с политикой cors больше не было. Спасибо!

Pazu 09.08.2021 14:30

Он работал на локальной машине, но не на производстве.

Я был сбит с толку, почему это происходит, но вдруг я заметил, что HEROKU развернул его на чем-то вроде

https://dummydomain.herokkuapp.com

но я пытался подключить его из

http://dummydomain.herokkuapp.com

это может быть причиной и вашего приложения.

:D

Добавление исправления со стороны angular (никаких изменений на сервере Node не требуется).

Это cors: { origins: ['http://localhost:4200']} не сработало для меня, поэтому я использовал прокси-файл в проекте angular, чтобы заняться CORS.

добавить файл в файл src/proxy.config.js

{
    "/api": {             // this attaches /api/ in api url
        "target": "http://localhost:3000",
        "secure": false,
        "logLevel": "debug"
    },
    "/": {               // use this as second entry
        "target": "http://localhost:3000",
        "secure": false,
        "logLevel": "debug"
    }
}

в angular.json добавьте это;

"serve": {
          "options": {
            "browserTarget": "move-safe:build",
            "proxyConfig": "src/proxy.config.json"
          },

и пересоберите угловое приложение

Другие вопросы по теме