I have a server application with CORS enabled, which works well with my AngularJS client (1.x). However, I am now upgrading to Angular 4 and encountering the following error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ||my-url||. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)
Despite having CORS enabled on the server side, my Angular 4 client seems to be the issue according to many questions I have researched.
EDITED
I have modified my service.ts as follows:
createAuthorizationHeader(): RequestOptions {
if (isNull(this._options)) {
const headers = new Headers();
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Headers', 'X-Requested-With, content-type');
headers.append('Content-Type', 'application/json; charset=utf-8');
this._options = new RequestOptions({headers: headers});
}
return this._options;
}
getStudies(): Observable<any> {
const options = this.createAuthorizationHeader();
return this._httpService.get(this.WEB_API_URL, options)
.map((response: Response) => console.log(response.json()))
}
NEW EDIT
It appears that there is still confusion. I have an Angular 1.x application running on the same server as the new Angular 4 application. The server has CORS properly configured. I had to make changes to the client for the Angular 1 application to work, and now I need to figure out how to do the same for Angular 4.