CORS problem when making GET call at Angular 6

Question

When I call the following URL: https://script.google.com/macros/s/AKfycbxk616n8wjgGeHZIc3Hm66Kcv4ZtWKZJQnEKLsxZC9LpoDK8mQZ/exec directly in the browser or in POSTMAN I get JSON correctly, but when I try to call the same link via GET in Angular, I get the error: "Failed to load https://script.googleusercontent.com/macros/echo...: 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."

I’m using a normal Httpclient:

getTabela() {
  return this.http.get<TabelaEstatistica[]>('https://script.google.com/macros/s/AKfycbxk616n8wjgGeHZIc3Hm66Kcv4ZtWKZJQnEKLsxZC9LpoDK8mQZ/exec');
}

Does anyone know what I should do to receive JSON in my application?

Answer 1

I was able to figure out the problem. My Angular application has an Interceptor class that takes all my HTTP requests and inserts a JWT, because I have a Spring application in the backend that expects this in all requests.

However, this GET request I am making is not for my backend, but for an external webservice. When I send this JWT in the GET request to google endpoint, they complain and gives this CORS problem.

I would then have two solutions:

1) Instead of making this GET request directly from my Angular application, do the backend, treat the data and then yes, deliver to the angular.

2) Prevent that specific HTTP call from passing through my Interceptor. It was the solution that I used to be faster for me, using Httpbackend, so the request will not go through the Interceptor:

 private http: HttpClient;

  constructor(handler: HttpBackend) {
    this.http = new HttpClient(handler);
   }

  linkTabela = 'https://script.google.com/macros/s/AKfycbxk616n8wjgGeHZIc3Hm66Kcv4ZtWKZJQnEKLsxZC9LpoDK8mQZ/exec';

    getTabela() {
      return this.http.get<TabelaEstatistica>(this.linkTabela);
    }