Ionic2，Angular2：如何在使用 http get 进行 REST API 服务调用时避免 CORS 问题？

Posted 2023-03-04

【中文标题】Ionic2，Angular2：如何在使用 http get 进行 REST API 服务调用时避免 CORS 问题？

【英文标题】：Ionic2,Angular2:How to avoid CORS issue while using http get for REST API service call?

【发布时间】：2017-09-10 14:00:37

【问题描述】：

我在某个远程服务器上有我的后端，我有它的 url。我需要使用 HTTP GET 和 POST 方法将数据从那里渲染到我的 Ionic2、Angular2 项目中。但是当我尝试进行服务调用时，我遇到了这个错误：

XMLHttpRequest 无法加载 http://192.162.91.159:8080/movieengine2/api/search/getMoviedetails。 对预检请求的响应未通过访问控制检查：否 'Access Control-Allow-Origin' 标头出现在 Requested 因此，resource.Origin 'http://localhost:8100' 是不允许的 访问/

我在互联网上搜索了很多，但大多数论坛都太旧了。 我参考了以下内容：

Angular 2 - No 'Access-Control-Allow-Origin' header is present on the requested resource

https://forum.ionicframework.com/t/cors-problem-with-ionic-2-and-angular-2-no-access-control-allow-origin-header-is-present-on-the-requested-resource/58350/6

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"

我无法为我正在使用的版本找到合适的解决方案。

【问题讨论】：

您的“代理”毫无意义。您应该为路径声明一个代理（如/server）并设置外部目标URI。然后，在您的代码中，将this.backendUrl 值替换为/server，这将解决您的问题。请注意，在生产中您必须禁用代理。此外，请注意，在 ios 上，您不能再对不安全的服务器执行 http 请求，因此您的后端必须启用 SSL 协议（因此必须使用 HTTPs 协议）。

尝试在你的 chrome 中安装交叉扩展 chrome.google.com/webstore/detail/allow-control-allow-origi/…

@briosheje 你能告诉我我应该如何为我的服务器声明一个代理。而且我没有得到什么你我的代理必须在生产中被禁用。你的意思是说他们不会'应用发布时不工作？

错误不在代理本身，它在代码中。代理离子配置的工作原理是，如果匹配的 url 恰好是“/api”，它将用声明的 proxyUrl 替换“/api”。目前，您的代码没有使用它，并且您没有以应有的方式使用它。如果您的外部服务器 URI 是“192.162.91.159:8080/movieengine2/api/search”，则需要将/api 设置为“192.162.91.159:8080/movieengine2/api/search”（在您的代理配置中），并在您的代码中使用：this.backendUrl = "/api" + url;

@MohanGopi 在设备上测试我的应用程序时也能工作吗？

【参考方案1】：

有 4 种方法可以解决这个问题：

您可以设置代理 (read this tutorial)

您可以通过模拟器或手机运行您的应用程序（不方便）

您可以通过安装 cordova Whitelist plugin

来解决过去的 CORS 问题

您也可以尝试安装Chrome Allow-Control-Origin extension。