CODEWITHSUNDEEP
node.jsangularhttp
Victoria
Victoria

Reputation: 335

HTTP Request Failed in Angular

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');
  }

}

enter image description here

enter image description here

Upvotes: 0

Views: 870

Answers (2)

Victoria
Victoria

Reputation: 335

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

Upvotes: 0

Filip
Filip

Reputation: 143

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.

Upvotes: 1

Related Questions