如何解决CORS问题和JSONON问题在Ionic2 [英] How to resolve CORS issue and JSONP issue in Ionic2
问题描述
我是 IONIC-2
的新用户,想要将我的移动应用连接到 Odoo - 开源电子商务
。 。
这个连接涉及一些 JSONP
请求..我已经通过 jQuery
在 phonegap
应用程序中正常工作,但虽然我正在做同样的事情与 IONIC-2
它给我 CORS
和 JSONP
错误..
有人可以帮助我this ..
我之前的 jQuery
代码是..
/ ****** 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;
}
函数rpc_jsonp(url,payload){
//从有效载荷中提取,在url上设置
var data = {
session_id:window.localStorage.getItem(session_id),
id:payload.id
};
var ajax = {
type:POST,
dataType:'jsonp',
jsonp:'jsonp',
cache:
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 ****** /
我正在调用自定义json
函数 Login.html
p>
/ ****** 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 );
}
else {
alert('Invalid Username或Password。');
}
deferred.resolve();
})。fail(function(data){
alert('Invalid Username或Password。');
});
return deferred;
}
/ ****** login.html ****** /
在创建服务
时,我尝试了
IONIC 2
b $ b / ****** 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()
导出类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- 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 ****** /
我在 Login.ts
/ ****** login.ts ****** /
import {Component} from'@ angular / core';
import {App,NavController,MenuController,ViewController} from'ionic-angular';
import {TaskListPage} from'../task-list/task-list';
从'@ angular / http'import {Http,Jsonp,JSONP_PROVIDERS};
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 ****** /
控制台中出现
错误:
(chrome)
XMLHttpRequest无法加载https:// MY_SERVER_URL / web / session / authenticate。对预检请求的响应不通过访问控制检查:在请求的资源上没有Access-Control-Allow-Origin头。因此,不允许原始'http:// localhost:8100'访问。响应的HTTP状态代码为500.
控制台中出现错误:
$ b
/ web / session / authenticate:函数声明为能够处理类型'json'的请求,但使用类型'http'的请求调用
我不知道这是否正确的方法..任何人都可以指导这样做正确的顺序..
如何在 IONIC 2中实现相同
??
您可以在Chrome中停用同源策略。
- 在桌面上创建单独的chrome图标。
- 将该图标重命名为chrome(x-domain),以便知道是哪个。 li>
- 将目标字段更改为
C:\Program Files(x86)\ Google\Chrome\Application\chrome.exe--disable-web-security --user-agent =Android--user-data-dir =C:/ temp-chrome-eng
< ol start =5>
b
$ b
- disable-web-security
当您打开浏览器时,它将如下所示:
警告:此浏览器已停用安全功能,因此只能用于测试目的。
I am new to IONIC-2
and want to connect my mobile app to Odoo - open source ecommerce
..
this connection involves some JSONP
request.. I have done the same through jQuery
previously.. its working properly in phonegap
app.. but while I am doing the same thing with IONIC-2
it gives me CORS
and JSONP
errors..
can someone help me in this..
my previous jQuery
code is..
/****** 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 ******/
I am calling above custom json
function Login.html
file..
/****** 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 ******/
I tried followed code in IONIC 2
while creating 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 ******/
and I am using above service
in 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 in console : (chrome)
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 in console : (firefox)
/web/session/authenticate: Function declared as capable of handling request of type 'json' but called with a request of type 'http'
I am not sure whether this is right approach.. Can anyone guide to do this in right order..
how can I achieve the same in IONIC 2
??
Thanks in advance.
You can disable same origin policy in Chrome.
- Create a separate chrome icon on your desktop.
- Rename that icon to chrome (x-domain) so you know which is which.
- Right click on your new icon and click properties.
- Change the target field to
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-agent="Android" --user-data-dir="C:/temp-chrome-eng"
- Click Ok.
The magic happens here:
--disable-web-security
When you open your browser it will look like this:
WARNING: ONLY USE FOR TESTING PURPOSES AS THIS BROWSER HAS SECURITY DISABLED.
这篇关于如何解决CORS问题和JSONON问题在Ionic2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!