【问题标题】：How to resolve CORS issue and JSONP issue in Ionic2如何解决 Ionic2 中的 CORS 问题和 JSONP 问题
【发布时间】：2016-11-24 22:48:34
【问题描述】：

我是IONIC-2 的新手，想将我的移动应用程序连接到Odoo - open source ecommerce.. 这种连接涉及一些JSONP 请求。我之前通过jQuery 做过同样的事情。它在phonegap 应用程序中正常工作。但是当我用IONIC-2 做同样的事情时，它给了我CORS和JSONP 错误..

有人可以帮我吗..

我之前的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;
 }


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 ******/

我在上面调用custom json函数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 ******/

我在创建service 时尝试了IONIC 2 中的代码

/****** 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 ******/

我在Login.ts中使用service以上

/****** 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 ******/

控制台错误：（铬）

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.

控制台错误：(firefox)

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

我不确定这是否是正确的方法.. 任何人都可以指导以正确的顺序执行此操作..

我怎样才能在IONIC 2中达到同样的效果？？

提前致谢。

【问题讨论】：

标签： angular ionic2 jsonp

【解决方案1】：

我在同一个 url (localhost:8100) 上使用 ionic 和 iis 时遇到问题这个 chrome 扩展帮助我解决了 cors 问题：[在此处输入链接描述]

https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc

同样对于 web api，您可以将代码和平放在 web.config 文件中的 system.webServer 标记中

<system.webServer> 
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, 
DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
...
</system.webServer>

确保您的标题正确：

let headers = new HttpHeaders();
headers = headers.set('Content-Type', 'application/x-www-form-urlencoded');
headers.append('Access-Control-Allow-Origin','*');
headers.append('Access-Control-Allow-Methods','GET,PUT,POST,DELETE');
headers.append('Access-Control-Allow-Headers','Content-Type');

【讨论】：

【解决方案2】：

我在浏览器上使用CORS extensions 和plugins 在chrome 和mozilla 上运行。还是没有成功。

我不知道我的代码是错误的还是其他重要的问题。

编辑：按照以下两个 cmets 在 MAC 机器上禁用 chrome 的网络安全。

【讨论】：

我解决了浏览器上的 CORS 问题，仅出于开发目的暂时禁用了 chrome 的网络安全。并更改了我的 JSONService 代码。
使用以下命令在 mac 机器上禁用 chrome 的网络安全。 open -n -a "Google Chrome" --args --user-data-dir=/tmp/temp_chrome_user_data_dir_for_cordova http://localhost:8100/index.html --disable-web-security 这会创建另一个禁用安全性的 chrome 实例。

【解决方案3】：

您可以在 Chrome 中禁用同源策略。

在您的桌面上创建一个单独的 chrome 图标。

将该图标重命名为 chrome（x 域），以便您知道哪个是哪个。

右键单击新图标并单击属性。

将目标字段更改为"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-agent="Android" --user-data-dir="C:/temp-chrome-eng"

点击确定。

魔法发生在这里：

--disable-web-security

当您打开浏览器时，它将如下所示：

警告：仅用于测试目的，因为此浏览器已禁用安全功能。

【讨论】：

【解决方案4】：

您收到的错误是因为您的浏览器阻止了跨域 AJAX 请求（域未响应所需的标头）。但是，如果您在移动设备上执行应用程序，它应该可以工作，因为应用程序将直接执行请求。你可以阅读更多here。如果您在移动设备上启动该应用程序是否有效？

【讨论】：

库巴是正确的。在 android 或 ios 设备上运行您的应用程序时，它应该可以工作。但是，对于在浏览器中进行测试，请参阅下面的答案。
在设备上没有成功或错误日志。我不知道我的代码是错误的还是其他重要的东西。
我在使用 HTTPS 时遇到了问题，API 站点是否具有被 Android 接受的正确证书？如果可能，请先尝试使用 HTTP。并在代码中放置一个断点，以便您查看它是否实际执行。