對離子2，XMLHttpRequest的無法加載。與Laravel API

這是我的情景：對離子2，XMLHttpRequest的無法加載。與Laravel API

XMLHttpRequest cannot load http://phi.dev/api/login. Redirect from 'http://phi.dev/api/login' to 'http://localhost:8100/' has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect.

我有一個Aungular2 /離子2應用程序的本地和Laravel的Web API用於驗證用戶。如果我從我的Angular2模塊調用這個Web API，我會得到上面給出的異常。

注意：在Chrome網絡中，我可以將我的角度服務調用2次。首先使用請求方法：選項，第二次使用請求方法：獲取，返回Http 302.

有誰知道如何解決此問題。

在此先感謝。

來源

2017-02-13 Olivier Hamon

由於該請求是外部的，並且由於您在本地提供應用程序，您將遇到CORS問題。

爲避免此類問題本地（當使用ionic serve時），您必須在離子配置文件中設置本地代理。

檢查您的Ionic 2項目目錄並找到文件ionic.config.json：它通常位於項目的根目錄（並且需要在那裏以及package.json等等）。

打開文件，並添加以下（不要忘記，以確保前一個行用逗號（,）結束，因爲它是一個JSON文件）：

"proxies": [ 
    { 
     "path": "/server", 
     "proxyUrl": "http://phi.dev" 
    } 
    ]

現在，在部分要在哪裏執行HTTP請求，請將http://phi.dev替換爲/server。我會在這裏給你一個例子。

我建議你，但是，要知道，這樣的編輯將讓您編譯應用到不行，所以你可能想要把用於測試和編譯環境調試標誌，就像這樣：

class MyServiceOrComponent { 
    private debug: boolean = true; // Set this flag to FALSE when you need to actually compile the app for any real device. 
    private server: string = this.debug ? "/server" : "http://phi.dev"; 

    constructor(private http: HTTP) { 
     const login = "/api/login"; // don't to it exactly like that, make a static list or something like this to store paths. 
     let request = this.http.get(this.server + login).then((res) => { 
     console.log(res); 
     }); 
    } 
}

簡而言之，會發生什麼情況是，如果將HTTP請求作爲「本地主機」執行，則會引發異常（由於CORS策略）。只有當您在測試環境（localhost）中運行應用程序時纔會發生這種情況。爲避免這種情況，您提供了一個代理，以便該請求有效。

來源

2017-02-13 17:46:08 briosheje

非常感謝！它現在有效。感謝所有的解釋！ –

不用客氣，記住當你需要編譯時將flag設置爲false。另外，作爲進一步的問題，請記住，如果您運行** ionic build **，並且忘記了標誌並將其置爲true，那麼當您再次構建時還需要編輯更多代碼，因爲如果再次執行構建在更改調試標誌後，它可能不會反映已編譯的APK上的更改，因此請注意這一點;）在這種情況下，您可以做的最聰明的事情是在任何服務器上進行一些更改（這會觸發守護進程重新編譯一切！） – briosheje

對離子2，XMLHttpRequest的無法加載。與Laravel API

回答

相關問題