IONIC 3 CORS ISSUE

我在嘗試對API進行GET調用時遇到了Ionic 3的CORS問題。我正在使用離子本地服務器，在命令行中爲活服務器運行離子服務器。IONIC 3 CORS ISSUE

錯誤否請求的資源上存在'Access-Control-Allow-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

請求網址 https://api-2445582011268.apicast.io個 HEADERS 核心價值用戶鍵YOUR_KEY 接受應用程序/ JSON

的首要問題 我的呼叫失敗。如何爲這個問題創建代理？

來源

2017-10-16 Chris Simmons

嘗試將'http.get'請求中的url更改爲'/ games'。代理將用真正的替代它。 – emroussel

代理功能期望您引用本地服務器。在您的GET請求中，您仍然指向遠程API。如果您將代碼更改爲this.http.get('/games/...'，它應該開始工作，因爲請求將轉到http://localhost:8100/games...，「代理」選項將捕獲並傳遞到您提供的URL。

您可能也只需要在proxyUrl字段中輸入https://api-2445582011268.apicast.io。我認爲路徑的其餘部分是直通。

來源

2017-10-16 19:04:26

嘿傑夫，我做了你問。我將proxyUrl更改爲「https://api-2445582011268.apicast.io」，我不再收到CORS問題。我現在有另一個問題。我收到一個新的錯誤 - 「運行時錯誤位置0的JSON中的意外標記H」。我不知道爲什麼我收到此錯誤。 –

通過chrome開發工具Network選項卡查看您的請求。什麼是HTTP響應代碼？你可能會在那裏看到更多的信息。另外，不確定是否在控制檯中看到任何指示代理正在處理請求的內容。也許有更多的信息。此外，我建議使用ARC或郵遞員或某些REST客戶端來打擊您的代理服務配置類似於您在網絡選項卡中看到的內容。可能更容易在那裏調試API調用。 –

要解決此問題，請更改以下行

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調用。

謝謝。

來源

2017-10-17 04:31:25

謝謝！這解決了我的問題！ –

很高興幫助。 @ChrisSimmons請注意此答案，以便具有類似查詢的開發人員可以從中獲得解決方案。 –

IONIC 3 CORS ISSUE

回答

相關問題