CORB / CORS error requesting google api

Question

CORB / CORS error requesting google api

Navigation

#1 by (0 votes)

0

I have an ionic-angled design with server developed in nodejs. I'm trying to do a user authentication by sending a request to google api through the Passport framework using Google-Strategy .

When you make 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 am already granting permission to all request sources. So I can not understand why I'm having this problem.

The problem seems to be that I'm using the browser to test the application with the ionic serve command. I have already added an extension to the chrome that grants permission to the sources, but it did not solve my problem.

node.js ionic angular

asked by anonymous 31.07.2018 / 02:49

1 answer

Import phpmyadmin Encoding 'br' is not supported. Only supports gzip or deflate encoding

score 0 · Answer 1

This is because before the reuisition you make, a preflight request of type OPTIONS is made.

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

1 - Use the

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 are trying to access. I saw this response at: No 'Access-Control-Allow-Origin' header is present on the requested resource-when trying to get data from the REST API . Example using 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);
        }
      );    
  }

}