Блог

Я могу получить доступ к другим конечным точкам из моего интерфейса, но когда я хочу получить доступ к конечной точке сокета, я получаю это сообщение об ошибке:

чат: 1 Доступ к XMLHttpRequest по адресу ‘http://localhost:3000/socket.io/?EIO=3amp;transport=pollingamp;t=NOAlAsz » из источника «http://localhost:4200 ‘ был заблокирован политикой CORS: на запрошенном ресурсе отсутствует заголовок ‘Access-Control-Allow-Origin’.

chatapp.component.ts

 import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { User } from '../models/users';
import { AuthService } from '../services/auth.service';
import { SocketService } from '../services/socket/socket.service';
import { UsersService } from '../services/users/users.service';

@Component({
  selector: 'app-chatapp',
  templateUrl: './chatapp.component.html',
  styleUrls: ['./chatapp.component.scss']
})
export class ChatappComponent implements OnInit {

  private socket
  chatForm:FormGroup
  user:User
  groups
  submitted =false
  constructor(
    private socketService:SocketService,
    private formBuilder:FormBuilder,
    private userService:UsersService,private authentication:AuthService) {
      this.chat()
    }

  ngOnInit(): void {
    this.getUser()
    this.getUserGroups()
  }

  chat(){
    this.chatForm = this.formBuilder.group({
      chat:['',Validators.required]
    })
  }
} 
 

сокет.service.ts

 import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
import * as io from 'socket.io-client';


@Injectable({
  providedIn: 'root'
})
export class SocketService {

  private socket
  private socketUrl = 'http://localhost:3000';

  constructor(private http: HttpClient) {
    this.socket = io(this.socketUrl)
  }
}
 

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
import { ChatappComponent } from './chatapp/chatapp.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { SocketService } from './services/socket/socket.service';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    SignupComponent,
    ChatappComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
  providers: [SocketService],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

мой серверный сервер
app.js

 const express = require('express')
const http = require('http')
const path = require('path')
const socketIO = require('socket.io')
const moment = require('moment')
const morgan = require('morgan')
const winston = require('winston')
const formateMessage = require('./utils/messages')
const formatMessage = require('./utils/messages')
const cors = require('cors')

const app = express()
app.use(morgan('tiny'))
app.use(cors())
require('./startup/db')()
require('./startup/router')(app)
app.get('',(req,res) => {
    res.send({
        title:'Chat-App',
    })
});

const server = http.createServer(app)
const io = socketIO(server)

//Set static folder
app.use(express.static(path.join(__dirname,'public')));

const appName = "Chat-app"

io.on('connection',socket => {
    socket.on('joinRoom', ({username , room }) => {

        //to the single client connecting
        socket.emit('message',formateMessage(appName,'Welcome to chat-app!'));

        //Broadcast when a user connected to all users except that particular user that connected
        socket.broadcast.emit('message',formateMessage(appName,'A user has joined the chat'));

        //when client disconnet
        socket.on('disconnect', () => {
            io.emit('message',formatMessage(appName,'A user has left the chat'))
        })
    })

    //to all the clients in general
    //io.emit()

    //listen to chat message
    socket.on('chatMessage', msg => {
        io.emit('message',formatMessage('user',msg))
    })

})




server.listen(3000,() => {
    winston.info("----Project is up and running----")
});
 

Поскольку ваш angular работает на порту 4200, а серверная часть работает на порту 3000, происхождение обоих приложений отличается. По соображениям безопасности он отображается, поскольку мы находимся в режиме разработки angular.

В принципе, выполнив (Win r) следующую команду (или создав с ее помощью ярлык и открыв Chrome с его помощью)

 chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
 

Вы можете открыть новый «небезопасный» экземпляр Chrome одновременно с тем, чтобы другие «безопасные» экземпляры браузера оставались открытыми и работали в обычном режиме.

Ошибка будет устранена в рабочем режиме проекта.

Вы можете добиться этого двумя способами

1) Отключив веб-безопасность в браузере с помощью

 chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
 

2) Путем добавления прокси в код angular.Вы можете найти подробные инструкции здесь

 {
        "/api": {
            "target": "http://localhost:3000",
            "secure": false
        }
    }