IONIC 发布请求引发错误答案

【问题标题】：IONIC post request throwing errorIONIC 发布请求引发错误
【发布时间】：2018-01-27 04:01:35
【问题描述】：

我正在尝试从我的 ionic 3 应用程序向我的 laravel api 进行 POST 登录 api 调用。但是，当我尝试获取数据时，它会引发错误，我不太确定可能是什么原因。

我的代码在提供者中

postData(credentials, type){
    return new Promise((resolve,reject)=>{
      let headers = new Headers();
      headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

      this.http.post(
          apiUrl+type,
          JSON.stringify(credentials),
          { headers: headers }
      ).subscribe(res=>{
        resolve(res.JSON());
      }),(err)=>{
        reject(err);
      }
    });
  }

来自我的登录页面

responseData:any;
  userData={"provider":"","email":"","password":""};
login() {
    //Get email address and password and validate
    this.authService.postData(this.userData,"login").then((result)=>{
      this.responseData = result;
      localStorage.setItem('userToken',JSON.stringify(this.responseData));
      //console.log(this.responseData);
      console.log(this.userData);
    },(err)=>{
      //connection failed message
    });

    // Once validated go to home page
    //this.nav.setRoot(HomePage);

  }

所以当我进行 api 调用时，我期待它给我

{"status":200,"msg":"Successfully loged in","token":"Z82VWTdABK9hcEvnng5kGR2NWW9iX1giewX5B6fw8jUFhVpN1OjIZPKGcwq1"}

但我得到的不是这个

POST http://localhost:8100/://localhost:8000/api/login 404 (Not Found)

ERROR Response {_body: "<!DOCTYPE html>↵<html lang="en">↵<head>↵<meta char…//localhost:8000/api/login</pre>↵</body>↵</html>↵", status: 404, ok: false, statusText: "Not Found", headers: Headers, …}headers: Headers_headers: Map(7) {"content-security-policy" => Array(1), "x-content-type-options" => Array(1), "connection" => Array(1), "x-powered-by" => Array(1), "content-length" => Array(1), …}_normalizedNames: Map(7) {"content-security-policy" => "content-security-policy", "x-content-type-options" => "x-content-type-options", "connection" => "connection", "x-powered-by" => "x-powered-by", "content-length" => "content-length", …}__proto__: Objectok: falsestatus: 404statusText: "Not Found"type: 2url: "http://localhost:8100/://localhost:8000/api/login"_body: "<!DOCTYPE html>↵<html lang="en">↵<head>↵<meta charset="utf-8">↵<title>Error</title>↵</head>↵<body>↵<pre>Cannot POST /://localhost:8000/api/login</pre>↵</body>↵</html>↵"__proto__: Bodyconstructor: ƒ Response(responseOptions)toString: ƒ ()__proto__: Object

我确实签入了postman localhost:8000/api/login，它给出了成功的结果，但当我从我的离子应用程序调用时却没有。我对离子很陌生，所以不太确定发生了什么可以帮助我吗？

【问题讨论】：

标签： angular laravel ionic-framework ionic3

【解决方案1】：

您没有向我们展示您的apiUrl 的外观，而是基于您获得的错误和网址：

POST http://localhost:8100/://localhost:8000/api/login 404 (Not Found)

听起来您正在尝试在 url 中使用相对路径。需要提供完整的url，否则Angular会在前面申请localhost。

所以你的apiUrl 应该是这样的：

apiUrl = 'http://localhost:8000/api/';

在这种情况下，type 将是 login。

你也不需要在你的请求中使用JSON.stringify :)

【讨论】：

嗨@Alex，是的，我的apiUrl 看起来和你提到的一样let apiUrl = "http:://localhost:8000/api/";，根据你的建议，我取消了JSON.stringify，即使在那之后错误仍然存在。可能是因为我的 API 在另一个端口上，而我的 ionic 在不同的端口上运行？仍然应该不是问题，因为我启用了CORS
您的 apiUrl 中有两个 ::，应该只有一个。这里是错字吗？如果这是一个 cors 问题，你会得到一个完全不同的错误，你的 url 肯定有问题:)
现在我觉得自己很愚蠢，因为没有看到那个简单的错误：P tysm 对于这个帮助，太消耗了，以至于我又忽略了小错误：P ty :))
没问题！发生在我们所有人身上，我们失明了，只需要一双新的眼睛。周末愉快，编码愉快！ :)

【解决方案2】：

尝试像这样提供 requestUrl。

let requestURl = apiUrl+type;
this.http.post(
          requestURl,
          JSON.stringify(credentials),
          { headers: headers }
      ).subscribe(res=>{
        resolve(res.JSON());
      }),(err)=>{
        reject(err);
      }
    });

因为您提供的是相对 url，所以 Angular 将无法选择它，它会在路径前添加 localhost://

【讨论】：

同样的错误，为什么请求 url 从 localhost:8000/login 更改为 "http://localhost:8100/://localhost:8000/api/login" 会发生这种情况吗？
不，这不应该发生，在某些情况下我看到 ionic 添加来源，但它不会更改 requestURL