HTTP Request Failed in Angular

Question

I'm trying to connect an Angular Project with a NodeJs API, the issue is that the request doesn't work on Angular side, tho it works well in console and browser.

I tried it in console like: curl http://127.0.0.1:3333/table And I got back the response: [{"userid":2,"roleid":2,"username":"partner2","fullname":"His Full Name","psw":"[email protected]","email":"password","balance":0}]%

I assume there are some issues on Angular side. Would you have any idea how to fix it?

// app.modules.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // this is needed!
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app.routing';
import { ComponentsModule } from './components/components.module';
import { ExamplesModule } from './examples/examples.module';

import { AppComponent } from './app.component';
import { NavbarComponent } from './shared/navbar/navbar.component';
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {AuthInterceptor} from './auth.interceptor';
import {BrowserModule} from '@angular/platform-browser';

@NgModule({
    declarations: [
        AppComponent,
        NavbarComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        BrowserAnimationsModule,
        NgbModule,
        FormsModule,
        RouterModule,
        AppRoutingModule,
        ComponentsModule,
        ExamplesModule
    ],
    providers: [
        /*{
            provide : HTTP_INTERCEPTORS,
            useClass: AuthInterceptor,
            multi   : true,
        },*/
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

// services.services.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';

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

  constructor(private httpClient: HttpClient) {
  }

  public createNewUser(bodyParams: any): Observable<any> {
    return this.httpClient.post('carriers/new-carrier', bodyParams);
  }
  public getTableX(): Observable<any> {
    return this.httpClient.get('http://localhost:3003/api/table');
  }
  public getTableZ(): Observable<any> {
    return this.httpClient.get('http://localhost:3003/table');
  }
  public getTable(): Observable<any> {
    return this.httpClient.get('http://127.0.0.1:3333/table');
  }

}

Filip · Accepted Answer · 2020-11-14 23:17:00Z

1

You should fix that issue at your packend side, browser need responses with allowed cors Cross-Origin please check https://expressjs.com/en/resources/middleware/cors.html when you are using Espress Node js.

edited Nov 14, 2020 at 23:17

answered Nov 14, 2020 at 22:51

Filip

1431 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Victoria Over a year ago

Console of Angular, Nodejs or Browser console? (the browser console with the request error is added in the description) ?

Filip Over a year ago

No you provided network tab from browser console please provide console tab form browser console.

Victoria · Accepted Answer · 2020-11-14 23:19:48Z

0

This issue has been fixed through adding below line to my proxy

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    next();
});

https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9

answered Nov 14, 2020 at 23:19

Victoria

3352 silver badges17 bronze badges

Collectives™ on Stack Overflow

HTTP Request Failed in Angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related