gpt4 book ai didi

angular - 如何解决 Ionic2 中的 CORS 问题和 JSONP 问题

转载 作者:行者123 更新时间:2023-12-02 09:25:05 24 4
gpt4 key购买 nike

我是 IONIC-2 的新手,想要将我的移动应用连接到 Odoo - 开源电子商务。此连接涉及一些 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 ******/

我正在调用上面的自定义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 ******/

我在创建服务时尝试了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 ******/

控制台错误:( 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.

控制台错误:(firefox)

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

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

如何在 IONIC 2 中实现相同的效果??

提前致谢。

最佳答案

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

  1. 在桌面上创建一个单独的 Chrome 图标。

Dual Chrome

  • 将该图标重命名为 chrome(x 域),以便您知道哪个是哪个。
  • Chrome rename

  • 右键单击新图标,然后单击“属性”。
  • Properties

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

  • 点击“确定”。
  • 魔法发生在这里:

    --disable-web-security

    当您打开浏览器时,它将如下所示:

    Finished

    警告:仅用于测试目的,因为此浏览器已禁用安全性。

    关于angular - 如何解决 Ionic2 中的 CORS 问题和 JSONP 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38502609/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com