I am trying to fetch data from a Spring boot ReST Micro service which gives me data ( username and password) in JSON format ( [{"username":"Mark","password":"mark123"}] ) through its endpoint "http://localhost:8080/checkUsers"
I created a simple application in angular 2 with basic.service.ts file which fetches data through my RestAPI end point
I am unable to see the data in my console and I am getting this below error in my console
"Failed to load http://localhost:8080/checkUsers: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access."
Below shown is my code
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BasicService } from './basic.service';
@NgModule({
declarations : [ AppComponent ],
imports : [BrowserModule,HttpModule,FormsModule ],
providers : [BasicService],
bootstrap : [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { BasicService } from './basic.service';
@Component({
selector: 'app-root',
template: '<h1>{{ title }}</h1>'
})
export class AppComponent {
title :string;
constructor(private MyService: BasicService){
this.title="Angular Service";
this.MyService.GetPosts()
.subscribe(posts => {console.log(posts)});
}
}
Here is my service
basic.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class BasicService {
constructor(private http:Http) { }
GetPosts(){
return this.http.get('http://localhost:8080/checkUsers')
.map(result => result.json());
}
}
Can anybody please help to solve this issue.