离子 3 CORS 问题 [英] IONIC 3 CORS ISSUE

问题描述

我在尝试制作 GET 调用 API.我正在使用 Ionic 本地服务器，在实时服务器的命令行中运行 ionic serve.

<块引用>

错误 请求的资源上不存在 'Access-Control-Allow-Origin' 标头.Origin 'http://localhost:8100' 因此不是允许访问.

我尝试使用代理设置更新 ionic.config.json 但这似乎不起作用..

<代码>{"name": "projectLeagueApp","app_id": "47182aef",类型":离子角"，集成":{科尔多瓦":{}},代理":[{"路径":"/游戏","proxyUrl": "https://api-2445582011268.apicast.io/games/"}]}

我的数据服务

import { Injectable } from '@angular/core';从 '@angular/http' 导入 { Http, Headers, RequestOptions };导入 'rxjs/add/operator/map';@Injectable()导出类 DataProvider {headers = new Headers({'user-key': '1234567890123'});options = new RequestOptions ({headers: this.headers});限制:数量 = 50；构造函数(公共http:Http){console.log('Hello DataProvider Provider');}getGames(流派，offset_num){让流派_id = 流派；让偏移= 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标题核心价值用户密钥 YOUR_KEY接受申请/json

主要问题我的通话失败.如何为这个问题创建代理?

解决方案

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

ionic.config.json

<代码>{"name": "projectLeagueApp","app_id": "47182aef",类型":离子角"，集成":{科尔多瓦":{}},代理":[{"路径":"/游戏","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 调用中，网址应以/games"开头.'/games' 因为 ionic 会将 http://localhost:<port>/games 代理到 https://api-2445582011268.apicast.io/games

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

谢谢.

I am having a CORS issue with Ionic 3 when attempting to make GET calls to an API. I am using Ionic local server, running ionic serve in the command line for live server.

Error No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

I tried updating ionic.config.json with proxy setting but that does not seem to be working..

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

My Data Service

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)
  }

}

I am trying to make calls to this api

Request Url

https://api-2445582011268.apicast.io
HEADERS
Key Value
user-key    YOUR_KEY
Accept  application/json

Primary Question My calls are failing. How do I create proxy for this issue?

解决方案

To fix this issue, please change the following lines

ionic.config.json

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

You have to remove the " / " which is at the end of of "proxyUrl".

My Data Service

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)

In the http call, the url should begin with '/games'. '/games' because ionic will proxy http://localhost:<port>/games to https://api-2445582011268.apicast.io/games

Please use the above method for external GET and POST calls in your application.

Thank you.

这篇关于离子 3 CORS 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！