如何解决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中停用同源策略。

1. 在桌面上创建单独的chrome图标。

2. 将该图标重命名为chrome（x-domain），以便知道是哪个。 li>
   

4. 将目标字段更改为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.

1. Create a separate chrome icon on your desktop.

2. Rename that icon to chrome (x-domain) so you know which is which.

3. Right click on your new icon and click properties.

4. 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"

5. 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屋！