Поэтому я использую простой сервер 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).
попробуй это
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
я обновил ответ, можете ли вы попробовать это тоже и извините, если это тоже не сработает ..
То же самое, все еще не работает, я уже испробовал все возможные исправления на стороне сервера, все равно не работает :c
Проверьте версию 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
Проблема решена, большое спасибо :) Версия ngx-socket-io была выше 3.1.2, но когда я добавил источник cors, как вы показали, все заработало нормально, проблем с политикой cors больше не было. Спасибо!
Он работал на локальной машине, но не на производстве.
Я был сбит с толку, почему это происходит, но вдруг я заметил, что 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"
},
и пересоберите угловое приложение
Вы нашли способ решить эту проблему?