This error has nothing to do with your client application at all. This is your API server - it does not return the appropriate CORS related headers that would instruct the browser to allow your request. It looks like you are sending the CORS headers on a GET request, which will not work. The browser uses the OPTIONS request to get these headers.
On Mon, Aug 28, 2017 at 9:22 AM Joel Suter <suter.j...@gmail.com> wrote: > Hello guys > > I am making a simple get request on my angular 4 application. I am getting > this error: "Response to preflight request doesn't pass access control > check: No 'Access-Control-Allow-Origin' header is present on the requested > resource. Origin 'http://localhost:4200' is therefore not allowed access. > The response had HTTP status code 401." > The get request in my service class looks like this: > return this.http.get(' > http://localhost:7990/bitbucket/rest/project/1.0/project/second', { > "headers" : new HttpHeaders().append('Authorization', 'Basic > YWRtaW46YWRtaW4=') > }).subscribe(data => { > console.log(data); > }); > The resource that is being called looks like this: > @GET > @Produces({ MediaType.APPLICATION_JSON }) > @Path("/second") > @CrossOrigin > public Response getFirstProjects() { > return Response.ok().header("Access-Control-Allow-Origin", "*") > .header("Access-Control-Allow-Headers", "Authorization").build(); > } > Can someone explain what is happening and how I can fix that? I am pretty > new to angular and rest in general. Can someone please give an > explanation/correction or a full example. > Extra info: Service class import: > import { Injectable } from '@angular/core'; > import { Http } from '@angular/http'; > import { HttpHeaders, HttpClient, HttpHandler } from > '@angular/common/http'; > import 'rxjs/add/operator/map'; > > @Injectable() > export class ProjectService { > > constructor(public http:HttpClient, public httpHandler:HttpHandler) { > console.log('Data service connected...'); > } > App.module.ts class: > import { BrowserModule } from '@angular/platform-browser'; > import { NgModule } from '@angular/core'; > import { FormsModule } from '@angular/forms'; > import { HttpClientModule } from '@angular/common/http'; > import { HttpHeaders, HttpClient, HttpHandler } from > '@angular/common/http'; > import { RouterModule, Routes } from '@angular/router' > > > import { AppComponent } from './app.component'; > import { ProjectComponent } from './components/project/project.component'; > import { ProjectService } from './services/project.service'; > import { UserComponent } from './components/user/user.component'; > > @NgModule({ > declarations: [ > AppComponent, > ProjectComponent, > UserComponent > ], > imports: [ > BrowserModule, > FormsModule, > HttpClientModule > //HttpHeaders, > //HttpClient > ], > providers: [ProjectService, > HttpClient > ], > bootstrap: [AppComponent] > }) > export class AppModule { } > > -- > You received this message because you are subscribed to the Google Groups > "Angular and AngularJS discussion" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to angular+unsubscr...@googlegroups.com. > To post to this group, send email to angular@googlegroups.com. > Visit this group at https://groups.google.com/group/angular. > For more options, visit https://groups.google.com/d/optout. > -- Lucas Lacroix Computer Scientist Advanced Technology Division, MEDITECH <http://ehr.meditech.com/> 781-774-2293 -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscr...@googlegroups.com. To post to this group, send email to angular@googlegroups.com. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
