[英]Ionic2,Angular2:How to avoid CORS issue while using http get for REST API service call?
我在一些远程服务器上有我的后端,我有它的 url。 我需要使用 HTTP GET 和 POST 方法将数据从那里渲染到我的 Ionic2,Angular2 项目中。但是当我尝试进行服务调用时,我抛出了这个错误:
XMLHttpRequest 无法加载http://192.162.91.159:8080/movieengine2/api/search/getMoviedetails 。 对预检请求的响应未通过访问控制检查:请求的资源上不存在 'Access Control-Allow-Origin' 标头。因此,不允许访问 Origin ' http://localhost:8100 '
我在互联网上搜索了很多,但大多数论坛都太旧了。 我参考了以下内容:
Angular 2 - 请求的资源上不存在“Access-Control-Allow-Origin”标头
https://forum.ionicframework.com/t/ionic-2-cors-issue/59815
https://github.com/angular/angular/issues/13554
这是我在我的服务文件中的内容
import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions, BaseRequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
@Injectable()
export class TestService {
backendUrl:string='';
parameters: RequestOptions;
constructor(public http: Http) {
console.log('Hello TestService Provider');
}
private extractData(res: Response) {
let body = res.json();
return body || {};
}
private handleError(error: Response){
return Observable.throw(error.json().error || 'Server Error')
}
get(url, params)
{
var headers = new Headers
({
'X-Requested-With': 'XMLHttpRequest'
});
headers.append("Accept", 'application/json');
headers.append('Content-Type', 'application/json' );
let options = new RequestOptions({ headers: headers });
this.backendUrl='http://192.162.91.159:8080/movieengine2/api/search/'+url;
return this.http.get(this.backendUrl).map(this.extractData).catch(this.handleError);
}
我什至尝试在我的 ionic.config.json 中添加它
"proxies": [
{
"path": "/api",
"proxyUrl": "http://api.steampowered.com"
}
]
有人能告诉我如何避免这个问题吗? 我想要一个可以在设备或浏览器上运行的永久解决方案。提前致谢。这些是我正在使用的版本。
"cors": "^2.8.3",
"ionic-angular": "2.1.0",
"ionic-native": "2.4.1",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"sw-toolbox": "3.4.0",
"underscore": "^1.8.3",
"zone.js": "0.6.26"
我无法为我使用的版本找到合适的解决方案。
有4种方法可以解决这个问题:
您可以设置代理(阅读本教程)
您可以通过模拟器或手机运行您的应用程序(不方便)
您可以通过安装cordova Whitelist 插件来解决CORS 问题
您也可以尝试安装Chrome Allow-Control-Origin 扩展程序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.