Angular get Request 401 error

[Joel Suter]

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 { }

[Lucas Lacroix]

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.

--
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+u...@googlegroups.com.
To post to this group, send email to ang...@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

781-774-2293