Angular2 auth token in header request CORS/Preflight issue - apache

Question

I'm trying to request a HTTP GET call to my local REST REST http://demosite.com/mage_auth/api/rest it needs an authorization token to let a user call an endpoint.
So in my request I passed headers.set('Authorization', token) and content-type JSON, however it doesn't seems to be passing the header in the Request's Header when I check the network response.
I've created a httpClient Service to pass the auth token: --
createAuthorizationHeader(headers: Headers) {
var sample3Results = (new OAuthSimple()).sign({
path: 'http://www.demosites.com/mage_auth/',
signatures: {
'consumer_key': key,
'shared_secret': secret,
'access_token': token,
'access_secret': tokensecret
}
});
try {
console.debug('Sample 3', sample3Results);
} catch (e) { };
let headerAuth = sample3Results.header;
headers.set('Authorization', headerAuth);
headers.set('Content-Type', 'application/json; charset=UTF-8' );
}
get(url) {
let headers = new Headers();
this.createAuthorizationHeader(headers);
return this.http.get(url, {
headers: headers
});
}
My component request look like this: --
this.httClient.get('http://www.demosites.com/mage_auth/api/rest/products')
.map(res => res.json())
.subscribe(data => {
console.log('data: ', data);
})
The REST API is running on WAMP server, so I've also added some CORS values in httpd.conf
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "origin, content-type"
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
</IfModule>
And I'm still getting this Error.
XMLHttpRequest cannot load http://www.demosites.com/mage_auth/api/rest/products. Response for preflight has invalid HTTP status code 400
Just in case, I also added a proxy.config.json from Angular-cli as thought that'd fix it because the request is coming from localhost:4200. But seems wasn't the case, I'm out of idea why it still giving a preflight error.
Can someone point out what's wrong with this request?

Answer 1

That can be a misconfiguration of the CORS filter server side.
As for me, even if my CORS filter was well configured server side, I still faced the same issue. I used the RequestOptions of Angular for the headers. This is how I soved it within my angular service
Angular 2
header.append("Content-Type", "application/json");
header.append("X-Auth-Token", token);
let options = new RequestOptions({headers: header})
return this.http.get(url, options)
.toPromise()
.then(response => response.json())
.catch(this.handleError);
Angular 4.3
Define an interceptor
import {Injectable} from '#angular/core';
import {HttpRequest, HttpHandler, HttpEvent, HttpInterceptor} from '#angular/common/http';
import {Observable} from 'rxjs/Observable';
import {AppService} from '../app.service';
#Injectable()
export class Interceptor implements HttpInterceptor {
constructor() {}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
request = request.clone({
setHeaders: {
token: `Bearer token`
}
});
return next.handle(request);
}
}
HttpRequests are immutable objects. So we need to copy them and then modidfy the copy.
Import the interceptor in app.module.ts
...
imports: [
BrowserModule,
HttpClientModule,
...
],
providers: [
{provide: HTTP_INTERCEPTORS, useClass: Interceptor, multi: true},
AppService
...
]
Use the interceptor in app.service.ts
import { Injectable } from '#angular/core';
import {Http, RequestOptions} from '#angular/http';
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs/Observable';
import {HttpClient} from '#angular/common/http';
#Injectable()
export class AppService {
constructor(public http: HttpClient) { }
connectServer() {
return this.http.get('url')
.map(response => response);
}
}