CORS issue in Angular 4 frontend with Google Cloud Endpoints running a go API backend

Question

I am unable to call API running in the google cloud behind cloud endpoints from the Angular 4 front end. I am getting following errors:

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 403.

I am running swagger too on the local machine and making successful API calls from swagger.
My various settings are as follows:

OpenAPI(Swagger Specification):

host: MyApp.appspot.com
x-google-endpoints:
  - name: MyApp.appspot.com
    allowCors: true

GO Server CORS Settings: I am using "github.com/rs/cors" library

c := cors.New(cors.Options{
        AllowedOrigins:   []string{"*"},
        AllowedHeaders:   []string{"*"},
        AllowedMethods:   []string{"GET", "PUT", "POST", "HEAD", "POST"},
        AllowCredentials: true,
    })

Angular 4 App:

const payloadHeaders = new Headers({'Access-Control-Allow-Origin' : 'http://localhost:4200','authorization':'Bearer *********'});
    var url = 'https://MyApp.appspot.com/users/user?u=' + username;
    this.http.get(url,{headers:payloadHeaders}).timeout(3000)
    .map((response) => {
      return response.json();
    }).subscribe(

The only difference between swagger and angular might be how they make http request...though I am not sure. Swagger origin is '127.0.0.1:64298' whereas Angular is 'localhost:4200'

Does anyone know how I can overcome this CORS issue?

The Stackdriver log throws: Endpoints management skipped for an unrecognized >HTTP call: OPTIONS /users/[email protected] But I think I have taken care of that in GO server itself. So it is a bit >confusing.

Thanks!

Possible duplicate of No 'Access-Control-Allow-Origin' header in Angular 2 app — FussinHussin
Hussain, The solution provided in the answer simply doesn't work. — Santosh Kumar
Hussain is not my name, have you gotten the http calls to work using curl bash? you are sure the requests are going through? is there any other info you can provide or clarify — FussinHussin
Well Hussin, the http calls work using curl bash, and I am pretty sure the requests are going through. — Santosh Kumar
If you go through the question carefully, you have all the details to find out what is happening. Just a gentle reminder it is not just about angular, Please go through the question details carefully. — Santosh Kumar

Santosh Kumar Santosh Kumar · Accepted Answer · 2017-10-02T10:10:24

There was a silly mistake at my end. I missed out on a path component in Angular. It works fine now.

CORS issue in Angular 4 frontend with Google Cloud Endpoints running a go API backend

1 Answers