Angular 4前端中的CORS问题与运行go API后端的Google Cloud Endpoints

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/user?u=[e-mail] But I think I have taken care of that in GO server itself. So it is a bit >confusing.

Thanks!

Answer 1

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