IONIC 3 CORS ISSUE

Question

在尝试对API进行GET调用时,我遇到了Ionic 3的CORS问题.我正在使用Ionic本地服务器,在命令行中为live server运行ionic serve.

错误 否请求的资源上存在"Access-Control-Allow-Origin"标头.原产地" 的http://本地主机:8100 "因此不允许访问.

我尝试用代理设置更新"ionic.config.json",但似乎没有工作..

{
  "name": "projectLeagueApp",
  "app_id": "47182aef",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "proxies": [
    {
      "path":"/games",
      "proxyUrl": "https://api-2445582011268.apicast.io/games/"
    }
  ]
}

我的数据服务

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class DataProvider {

  headers = new Headers({'user-key': '1234567890123'});
  options = new RequestOptions ({headers: this.headers}); 
  limit: number = 50;

  constructor(public http: Http) {
    console.log('Hello DataProvider Provider');
  }

  getGames(genre, offset_num) {

    let genre_id = genre;
    let offset = offset_num;

    return this.http.get('https://api-2445582011268.apicast.io/games/?fields=name,release_dates,screenshots&limit='+this.limit+'&offset='+offset+'&order=release_dates.date:desc&filter[genres][eq]='+genre_id+'&filter[screenshots][exists]', this.options)
  }

}

我试图打电话给这个api

请求网址 https://api-2445582011268.apicast.io HEADERS键值用户密钥YOUR_KEY接受申请/ json

主要问题 我的电话失败了.如何为此问题创建代理？

Answer 1

要解决此问题,请更改以下行

ionic.config.json

{
  "name": "projectLeagueApp",
  "app_id": "47182aef",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "proxies": [
    {
      "path":"/games",
      "proxyUrl": "https://api-2445582011268.apicast.io/games"
    }
  ]
}

你必须删除"proxyUrl"末尾的"/".

我的数据服务

return this.http.get('/games/?fields=name,release_dates,screenshots&limit='+this.limit+'&offset='+offset+'&order=release_dates.date:desc&filter[genres][eq]='+genre_id+'&filter[screenshots][exists]', this.options)

在http调用中,url应以'/ games'开头."/游戏",因为离子会代理http://localhost:<port>/games到https://api-2445582011268.apicast.io/games

请在您的应用程序中使用上述方法进行外部GET和POST调用.

谢谢.

Answer 2

代理功能期望您引用本地服务器。在您的 GET 请求中，您仍然指向远程 API。如果您更改代码，this.http.get('/games/...'它应该开始运行，因为请求将转到http://localhost:8100/games...，“代理”选项将捕获该请求并将其传递到您提供的 URL。

您可能也只需要放入https://api-2445582011268.apicast.io该proxyUrl字段即可。我认为剩下的路是直通的。