CORB/CORS error when requesting google api

Question

I have an Ionic-angular project with server developed in nodejs. I’m trying to do a user authentication by sending a request to the google api through the framework Passport using the Google-Strategy.

When making the request, the following error occurs:

"Failed to load https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fuser%2Fgoogle%2Fredirect&scope=profile&client_id=976813214537-0a1kl69viqpgg5ibtcgt743secpsmrld.apps.googleusercontent.com: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 405"

On my server, I’m already granting permission to all request sources. So I can’t understand why I’m having this problem.

The problem seems to happen because I am using the browser to test the application through the command ionic serve. I’ve even added an extension to Chrome that grants permission to origins, but hasn’t solved my problem.

Answer 1

This happens because before the reunion you make, a request is made "preflight" type OPTIONS.

This issue can be fixed in the CORS settings on the server, but when you don’t have access to the server, you can use a proxy. I found two solutions that worked:

1 - Using the plugin HTTP

Install the plugin:

ionic cordova plugin add cordova-plugin-advanced-http
npm install --save @ionic-native/http

Include in app.module.ts:

import { HTTP } from '@ionic-native/http';
...
providers: [
    ...
    HTTP
  ]

On your page.ts:

import { HTTP } from '@ionic-native/http';

const endereco: string = 'https://...'; //seu endereço

Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,
    private http: HTTP) {
    })

  }

  requisicao(){
    this.http.get(endereco, {}, {})
      .then(data => {
        console.log(data.data);
      })
      .catch(error => {
        console.log(error);
      });    
  }

}

2 - Using a proxy

Add a proxy before the address you’re trying to access. I saw that answer in: No 'Access-Control-Allow-Origin' header is present on the requested Resource-when trying to get data from a REST API. Example using the Httpclient:

Include in app.module.ts:

import { HttpClientModule } from '@angular/common/http';
...
imports: [
    ...
    HttpClientModule
  ]

On your page.ts:

import { HttpClient } from '@angular/common/http';

const endereco: string = 'https://...'; //seu endereço

const proxyurl = "https://cors-anywhere.herokuapp.com/";

Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,
    private http: HttpClient) {
    })

  }

  requisicao(){
    this._http.get(proxyurl + endereco)
      .subscribe(
        (data) => {
          console.log(data);
        },
        (err) => {
          console.log(err);
        }
      );    
  }

}