angular - headers - Cómo resolver el problema CORS y el problema JSONP en Ionic2

how to enable cors in angular 6

Question

Soy nuevo en IONIC-2 y quiero conectar mi aplicación móvil a Odoo - open source ecommerce . Esta conexión implica alguna solicitud de JSONP . He hecho lo mismo a través de jQuery anteriormente ... está funcionando correctamente en la aplicación de phonegap ... pero mientras Estoy haciendo lo mismo con IONIC-2 . Me da errores CORS y JSONP .

alguien puede ayudarme en esto ...

mi código jQuery anterior es ...

/****** index.js ******/
function json(url, params) {
var deferred = jQuery.Deferred();
uniq_id_counter += 1;
var payload = {
''jsonrpc'': ''2.0'',
''method'': ''call'',
''params'': params,
''id'': ("r" + uniq_id_counter)
};
rpc_jsonp(url, payload).then(function (data, textStatus, jqXHR) {
if (data.error) {
deferred.reject(data.error);
}
deferred.resolve(data.result, textStatus, jqXHR);
});
return deferred;
}
function rpc_jsonp(url, payload) {
// extracted from payload to set on the url
var data = {
session_id: window.localStorage.getItem("session_id"),
id: payload.id
};
var ajax = {
type: "POST",
dataType: ''jsonp'',
jsonp: ''jsonp'',
cache: false,
data: data,
url: url
};
var payload_str = JSON.stringify(payload);
var payload_url = jQuery.param({r: payload_str});
if (payload_url.length < 2000) {
// throw new Error("Payload is too big.");
}
console.log(ajax);
ajax.data.r = payload_str;
console.log(ajax);
return jQuery.ajax(ajax);
}
/****** index.js ******/

Estoy llamando arriba de la función custom json archivo Login.html ..

 /****** login.html ******/
function login(){
var base_url = ''MY_SERVER_URL'';
json(base_url+''web/session/authenticate'', {
''base_location'': base_url,
''db'':''myDB'',
''login'': ''admin'',
''password'':''admin''
}).done(function (data) {
if(data.uid != false){
alert(data);
}
else{
alert(''Invalid Username or Password.'');
}
deferred.resolve();
}).fail(function(data){
alert(''Invalid Username or Password.'');
});
return deferred;
}
/****** login.html ******/

Intenté seguir el código en IONIC 2 mientras creaba el service

/****** OdooJsonService.ts ******/
import { Injectable } from ''@angular/core'';
import { Http, Jsonp, JSONP_PROVIDERS, Headers, RequestOptions } from ''@angular/http'';
import { Observable } from ''rxjs/Observable'';
import ''rxjs/Rx'';
@Injectable()
export class OdooJsonService {
//data: any;
uniq_id_counter: number;
payload: any;
result_rpc: any;
constructor(private http: Http, private jsonp: Jsonp) {
this.http = http;
//this.data = null;
}
json(url, params) {
this.uniq_id_counter = this.uniq_id_counter + 1;
this.payload = JSON.stringify({
''jsonrpc'': ''2.0'',
''method'': ''call'',
''params'': params,
''id'': ("r" + this.uniq_id_counter)
});
return this.rpc_jsonp(url, this.payload)
.map(res => res.json())
.catch(this.handleErrorOne);
}
rpc_jsonp(url, payload) {
let data = JSON.stringify({
//session_id: window.localStorage.getItem("session_id"),
id: payload.id
});
let ajax = JSON.stringify({
type: ''POST'',
dataType: ''jsonp'',
jsonp: ''jsonp'',
cache: false,
data: data,
url: url
});
let headers = new Headers({ ''Content-Type'': ''application/json'', ''Access-Control-Allow-Origin'': ''*'',
''Access-Control-Allow-Methods'': ''PUT, GET, POST'',
''Access-Control-Allow-Headers'': ''Origin, X-Requested-With, Content-Type, Accept''});
let options = new RequestOptions({ headers: headers });
return this.http.post(url, ajax, options)
.map(res => res.json())
.catch(this.handleErrorTwo);
}
handleErrorOne(error) {
console.error(error);
return Observable.throw(error.json().error || ''Server error'');
}
handleErrorTwo(error) {
console.error(error);
return Observable.throw(error.json().error || ''Server error'');
}
} // End of OdooJsonService
/****** OdooJsonService.ts ******/

y estoy usando el service anterior en Login.ts

/****** login.ts ******/
import { Component } from ''@angular/core'';
import { App, NavController, MenuController, ViewController } from ''ionic-angular'';
import { TaskListPage } from ''../task-list/task-list'';
import { Http, Jsonp, JSONP_PROVIDERS } from ''@angular/http'';
import { OdooJsonService } from ''../../providers/odoo-json-service/odoo-json-service'';
@Component({
templateUrl: ''build/pages/login/login.html'',
providers: [OdooJsonService, JSONP_PROVIDERS]
})
export class LoginPage {
public data: any;
constructor(private nav: NavController, public odooJsonService: OdooJsonService) {
this.odooMethod();
}
odooMethod() {
this.odooJsonService
.json(''MY_SERVER_URL/web/session/authenticate'', {''base_location'': ''MY_SERVER_URL'',
''db'':''myDB'', ''login'': ''admin'', ''password'':''admin''})
.subscribe(odooData => {
this.data = odooData;
console.log(JSON.stringify(this.data));
});
}
}
/****** login.ts ******/

error en la consola: (cromo)

XMLHttpRequest cannot load https://MY_SERVER_URL/web/session/authenticate. 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:8100'' is therefore not allowed access. The response had HTTP status code 500.

error en la consola: (firefox)

/web/session/authenticate: Function declared as capable of handling request of type ''json'' but called with a request of type ''http''

No estoy seguro de si este es el enfoque correcto ... ¿Alguien puede guiarme para hacer esto en el orden correcto?

¿Cómo puedo lograr lo mismo en IONIC 2 ?

Gracias por adelantado.

Answer 1

Puede deshabilitar la misma política de origen en Chrome.

1. Crea un ícono de Chrome por separado en tu escritorio.

2. Cambie el nombre de ese icono a chrome (dominio x) para que sepa cuál es cuál.

3. Haga clic derecho en su nuevo icono y haga clic en Propiedades.

4. Cambie el campo de destino a "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe" --disable-web-security --user-agent="Android" --user-data-dir="C:/temp-chrome-eng"

5. Haga clic en Aceptar.

La magia sucede aquí:

--disable-web-security

Cuando abras tu navegador se verá así:

ADVERTENCIA: ÚNICAMENTE PARA PROPÓSITOS, YA QUE ESTE NAVEGADOR TIENE LA SEGURIDAD DESACTIVADA.

Answer 2

El error que está recibiendo se debe a que su navegador está bloqueando las solicitudes AJAX de origen cruzado (el dominio no responde con los encabezados requeridos). Sin embargo, si ejecuta la aplicación en un dispositivo móvil, debería funcionar, porque la aplicación ejecutará la solicitud directamente. Puedes leer más aquí . ¿Funciona si inicias la aplicación en un dispositivo móvil?

Answer 3

Me estoy ejecutando en el navegador usando CORS extensions y plugins tanto en chrome como en mozilla . todavía no hay éxito.

No entiendo si mi código es incorrecto o si algo más importa.

EDITAR: siga a continuación dos comentarios para deshabilitar la seguridad web de Chrome en la máquina MAC.