Question

我已经尝试过在万维网上发布的任何解决方案。

易于复制，创建新的Laravel应用程序并配置API路由以接收get / post请求。
创建一个Ionic应用程序并将get / post请求发送到API。
在浏览器上尝试，根据需要设置CORS，浏览器将在此之后运行。
即使在配置了CORS之后，也可以在移动设备（iOS，Android）上尝试它。

我已经使用api获取/发布路径构建了一个新的Laravel应用程序，并且还使用了angular的HttpClient并尝试使用Cordova的NativeHttp插件来构建一个新的ionic应用程序。现在，一个简单的get Request可以在浏览器中正常运行（离子服务）。如果我尝试在移动设备上发送“获取/发送请求”，则会收到“消息”：“ http://127.0.0.1:8000/api/login的Http故障响应：0未知错误”，并且Angular和Native Call错误的HTTPClient错误：{“状态” ：-1，“错误”：“无法连接到服务器。”}使用NativeHTTP插件。

我尝试在Laravel API中设置CORS，我使用了barryvdh / laravel-cors，我尝试制作了自己的CORS中间件，还尝试了另一个laravel Cors软件包。 Laravel方面没有任何帮助。

然后，我尝试了一些代码和离子应用程序，以解决此问题。包含在标头中，没有简单的请求，NativeHTTP cordova-plugin-advanced-http，Angular HTTP ...没有任何作用...

这个来自Ionic Doc的示例不起作用...

    import { HTTP } from '@ionic-native/http/ngx';

    constructor(private http: HTTP) {}

    ...

    this.http.get('http://ionic.io', {}, {})
      .then(data => {

        console.log(data.status);
        console.log(data.data); // data received by server
        console.log(data.headers);

      })
      .catch(error => {

        console.log(error.status);
        console.log(error.error); // error message as string
        console.log(error.headers);

      });

我收到“消息”：“（未知url）的Http错误响应：-1未定义”，在带有Angular的HTTPClient的浏览器中，效果很好。

这也适用于浏览器：

    login(email: String, password: String) {

        return this.http.post('https://127.0.0.1:8000/api/login',
          {email: email, password: password}
        ).pipe(
          tap(api_token => {
            this.storage.setItem('api_token', api_token)
            .then(
              () => {
                console.log('Token Stored');
              },
              error => console.error('Error storing item', error)
            );
            this.api_token = api_token;
            this.isLoggedIn = true;
            return api_token;
          }),
        );
      }

在IOS和Android上，我得到：

“消息”：“ http://127.0.0.1:8000/api/login的Http错误响应：0个未知错误”

我尝试在有和没有电容器的情况下使用Ionic，我在ionic run --devapp以及离子cordova run ios，XCODE等条件下进行了尝试。

我使用Ionic移动应用程序进行的任何Laravel API之间的通信都无法与Httprequests一起使用...

我遵循了barryvdh软件包的Cors安装步骤，并且cors.php如下所示：

    'supportsCredentials' => false,
        'allowedOrigins' => ['*'],
        'allowedOriginsPatterns' => [],
        'allowedHeaders' => ['*'],
        'allowedMethods' => ['*'],
        'exposedHeaders' => [],
        'maxAge' => 0,

还进行了$ middleware步骤以使其具有全局性，并使用了终端命令php artisan vendor：publish-provider =“ Barryvdh \ Cors \ ServiceProvider”。

在未配置CORS的情况下，Browser无法正常工作，但是当我安装该软件包时，Browser可以正常工作。本地应用程序没有任何变化，安装了CORS打包后它们仍然无法使用...

完整错误：

    "headers": {
    [ng]     "normalizedNames": {},
    [ng]     "lazyUpdate": null,
    [ng]     "headers": {}
    [ng]   },
    [ng]   "status": 0,
    [ng]   "statusText": "Unknown Error",
    [ng]   "url": "http://127.0.0.1:8000/api/login",
    [ng]   "ok": false,
    [ng]   "name": "HttpErrorResponse",
    [ng]   "message": "Http failure response for         http://127.0.0.1:8000/api/login: 0 Unknown Error",
    [ng]   "error": {
    [ng]     "isTrusted": true
    [ng]   }
    [ng] }


    [console.log]: "Ionic Native: deviceready event fired after 374 ms"
    [ng] [console.log]: {
    [ng]   "headers": {
    [ng]     "normalizedNames": {},
    [ng]     "lazyUpdate": null,
    [ng]     "headers": {}
    [ng]   },
    [ng]   "status": -1,
    [ng]   "statusText": "Unknown Error",
    [ng]   "url": null,
    [ng]   "ok": false,
    [ng]   "name": "HttpErrorResponse",
    [ng]   "message": "Http failure response for (unknown url): -1         undefined",
    [ng]   "error": "Verbindung zum Server konnte nicht hergestellt werden."
    [ng] }

我知道我已经发布了很多信息，但可能还不够。希望您理解我的问题，也许有人也对Laravel API和Ionic移动应用程序也有此问题。

Answer 1

您需要根据响应的类型添加标题：

this.http.post('https://127.0.0.1:8000/api/login', {email: email, password: password}, { headers: { 'content-type': 'application/json' } })

Answer 2

解决了问题...

我没有托管API，只是通过php artisan服务（使用localhost：8000地址）来运行它。

我的移动设备无法连接到本地Mac地址，否则Mac上的模拟器可以连接到该地址。

因此，移动设备响应：“ message”：“针对（未知url）：-1的Http错误响应。

不知道未知错误0是如何发生的，我现在尝试使用主机地址进行尝试。

还是谢谢你。

使用Laravel作为REST API的移动设备上的Ionic 4应用程序的本地CORS问题

2 个答案: