Angular 5 - getting error as `No 'Access-Control-Allow-Origin' header is present on the requested resource`

Question

I am trying to post a file ( uploaded file ) to backed. getting this error.

Failed to load http://52.7.92.114:8080/cms-m2ts/rest/DocumentTagService/uploadFile: 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.

How to come up with this? here is my service in angular: please correct me wherever I am wrong. But the above stuff works without any issue in postman

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';


@Injectable()
export class DocUploadService {

    baseUrl: string = 'http://52.7.92.114:8080/cms-m2ts/rest/DocumentTagService';

    constructor(private http:Http) { }

    uploadDocument(file:File):Observable<File>{

        const headers = new Headers();
        headers.append('Content-Type', 'application/json');
        let options = new RequestOptions({ headers: headers, body:{"tagCount" : 5 } });

        const url = `${this.baseUrl}/uploadFile`;
        return this.http.post(url, file, options ).map(response => response.json())
    }

}

Postman doesn't validate CORS headers. See umpteen duplicates in the side bar --> — jonrsharpe, Apr 11 '18 at 12:24
This is not an Angular issue. Please use the tag of your backend and reformulate your question. If you don't know what your error is, make a google search first. — , Apr 11 '18 at 12:25

score -1 · Answer 1 · answered Apr 11 '18 at 12:43

If the server where you are posting the file is in your control, do the following:-

Add an OPTIONS action on the same resource and provide the Access-Control-Allow-Origin header with either your client IP or * to allow all. Eg. If its an ASP.NET MVC application, use the Microsoft.ASPNET.CORS NuGet package and apply the EnableCors setting in your global.asax. Other environments will have their own way of setting

If not, then you need to ask the owners to set this up for you.

Please explain reason for down voting? – NitinSingh Apr 11 '18 at 15:12 — NitinSingh, Apr 11 '18 at 15:12

Angular 5 - getting error as `No 'Access-Control-Allow-Origin' header is present on the requested resource`

1 Answers1