CORS issue using GET from Angular 6 to Google Apps Script

Question

I've created a very simple Script using Google Apps Script which reads a spreadsheet and return a JSON:

function doGet(e){

 // Change Spread Sheet url
 var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1DLVP96405P7djwPAJpGRRgIOFCiJwnktr1Z4HFz9ooI/edit#gid=811553549");

// Sheet Name, Chnage Sheet1 to Users in Spread Sheet. Or any other name as you wish
 var sheet = ss.getSheetByName("NumeroMortosConfrontos");

 return getConfrontos(sheet); 

}

function getConfrontos(sheet){
  var jo = {};
  var dataArray = [];

// collecting data from 2nd Row , 1st column to last row and last column
  var rowCabecalho = sheet.getRange(18,1, 1, 6).getValues();
  var dataRowCabecalho = rowCabecalho[0];
  var cabecalho = [];
  cabecalho.push(dataRowCabecalho[0]);
  cabecalho.push(dataRowCabecalho[1]);
  cabecalho.push(dataRowCabecalho[2]);
  cabecalho.push(dataRowCabecalho[3]);
  cabecalho.push(dataRowCabecalho[4]);
  cabecalho.push(dataRowCabecalho[5]);  

  var rows = sheet.getRange(19,1, 14, 6).getValues();

  for(var i = 0, l= rows.length; i<l ; i++){
    var dataRow = rows[i];
    var record = [];
    record.push(dataRow[0]);
    record.push(dataRow[1]);
    record.push(dataRow[2]);
    record.push(dataRow[3]);
    record.push(dataRow[4]);
    record.push(dataRow[5]);

    dataArray.push(record);   
  }  

  jo.cabecalho = cabecalho;
  jo.dados = dataArray;

  var result = JSON.stringify(jo);

  return ContentService.createTextOutput(result).setMimeType(ContentService.MimeType.JSON);

}

After publishing, I call the endpoint in my browser and works well as you can see in the link below:

https://script.google.com/macros/s/AKfycbxk616n8wjgGeHZIc3Hm66Kcv4ZtWKZJQnEKLsxZC9LpoDK8mQZ/exec

I've tried to call this link using HTTP Get from an Angular application, but when I open it, I see the error:

Failed to load resource: the server responded with a status of 405 () :4200/#/estatistica/confrontos:1 Failed to load https://script.google.com/macros/s/AKfycbxk616n8wjgGeHZIc3Hm66Kcv4ZtWKZJQnEKLsxZC9LpoDK8mQZ/exec: 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've been searching a lot of question and answers about it, but I really dont know what I have to do, what configuration I need to write and where (server side or client side). How could I solve this problem and receive the JSON in my front end application?

For my application, we have followed the answer in ( https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome) to deal with the cors issue for 4200 to access other hosts too. — prabhat gundepalli, Sep 11 '18 at 18:53
May be this doc helps https://developers.google.com/api-client-library/javascript/features/cors — boateng, Sep 11 '18 at 18:57
Now I'm receiving another error: Failed to load https://script.google.com/macros/s/AKfycbxk616n8wjgGeHZIc3Hm66Kcv4ZtWKZJQnEKLsxZC9LpoDK8mQZ/exec: Response for preflight does not have HTTP ok status. — Murilo Góes de Almeida, Sep 11 '18 at 19:31
Try resetting headers client side like in this answer: https://code-examples.net/en/q/2019f28 — boateng, Sep 11 '18 at 21:48

score 0 · Answer 1 · answered Sep 12 '18 at 13:03

My Angular application has an interceptor class that intercepts all HTTP requests and inserts a JWT, then send it to my backend server (Spring Security).

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

I've figured out two solutions:

1) Instead of making this GET request directly from my Angular application, do from my backend app, handle the data and then then, send to the angular application.

2) Prevent that specific HTTP call from passing through my interceptor. It was the solution 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);
    }

CORS issue using GET from Angular 6 to Google Apps Script

1 Answers1