在Ionic 2上，无法加载XMLHttpRequest.使用Laravel api

Question

这是我的场景：

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/Ionic2应用程序和一个用于验证用户的LaravelWebneneneba API。如果我从我的Angular2模块调用这个Web API，我会得到上面给出的异常。

注意：在Chrome网络中，我的angular服务可能被调用了2次。第一次使用请求方法：OPTIONS，第二次使用返回Http 302的请求方法：Get。

有人知道如何解决这个问题吗。

提前谢谢。

Answer 1

因为请求是外部的，并且您在本地为应用程序提供服务，所以您将遇到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);
});
}
}

简单解释一下，如果您以"localhost"的身份执行HTTP请求，它将抛出一个异常(因为CORS策略)。只有当您在测试环境(localhost)中运行应用程序时，才会发生这种情况。为了避免这种情况，您提供了一个代理，以便请求有效。