web-dev-qa-db-ja.com

IONIC 3 CORS ISSUE

GETを呼び出しようとすると、Ionic 3で [〜＃〜] cors [〜＃〜] の問題が発生しますAPI。ライブサーバーのコマンドラインでIonicローカルサーバーを使用し、ionicサーバを実行しています。

Error要求されたリソースに'Access-Control-Allow-Origin'ヘッダーがありません。したがって、Origin 'http://localhost: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に電話をかけようとしています

リクエストURL

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

一次質問通話が失敗します。この問題のプロキシを作成するにはどうすればよいですか？

jsonangularcorsionic3angular-services
12
Chris Simmons

この問題を修正するには、次の行を変更してください

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」で始まる必要があります。 '/ games'は、ionicがプロキシhttp://localhost:<port>/gamesからhttps://api-2445582011268.apicast.io/games

アプリケーションでの外部GETおよびPOST呼び出しに上記のメソッドを使用してください。

ありがとうございました。

19
Alvin Chettiar

開発環境でテストするには、Google Chrome in disable-web-securityモード。

手順（Windowsの場合）

  • 押す Windows キー+ R 実行ウィンドウを開きます。
  • 次のコマンドを入力/入力して押します Enter キー。

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

フォローする手順（Ubuntuの場合）

  • すべてのchrome.exeインスタンスを実行/実行する前に。

chromium-browser --disable-web-security --user-data-dir="[some directory here]"

  • 前Chrome 48

chromium-browser --disable-web-security

手順（Macの場合）

  • ターミナルで次のコマンドを実行します。

open -n -a "Google Chrome" --args --user-data-dir=/tmp/temp_chrome_user_data_dir http://localhost:8100/ --disable-web-security

1
Raghav Dinesh

Chromeインストールするだけでchrome extension Allow control Origin 素早く簡単な方法でテストに使用したい場合

1
Saurabh Ahuja

プロキシ機能は、ローカルサーバーを参照していることを想定しています。 GETリクエストでは、リモートAPIを指しています。コードをthis.http.get('/games/...'に変更すると、リクエストがhttp://localhost:8100/games...に送られ、「プロキシ」オプションがキャッチして指定したURLに渡すため、機能し始めます。

proxyUrlフィールドにhttps://api-2445582011268.apicast.ioを入れるだけでよい場合もあります。残りのパスはパススルーだと思います。

0
Jeff Woodard

エクスポート関数getAuthHttp（http：Http、options：RequestOptions）{console.log（ "token"、storage.get（ 'id_token'））;

new AuthHttp（new AuthConfig（{

      headerName: 'Authorization',
      headerPrefix: 'bearer',          
      tokenName: 'id_token',
      tokenGetter: (() => storage.get('id_token')),
      noJwtError: true,    
      //globalHeaders: [{'Accept': 'application/json'}],
      globalHeaders: [{'Content-Type':'application/json'},{"Access-Control-Allow-Origin": "*"}],

    }), http, options);

}

0
tuhin kole