Question

我正在构建一个应该与ASP net MVC应用程序通信的Ionic应用程序（我需要获取JSON数据）。

当我从Ionic应用程序向ASP应用程序发送请求时，因为未登录，所以我被禁止了。我明白了：

请求的请求上没有'Access-Control-Allow-Origin'标头资源。因此，不允许原点“ http://localhost:8100” 访问。响应的HTTP状态代码为401。

我的问题是我想登录我的API，但不知道如何继续使用Ionic。在类似的应用程序中，我使用了C＃客户端，并且使用了 HttpWebRequest 和 NetworkCredential 对象。

我发出了POST请求以尝试登录API，但我只收到401错误。这是代码，但是我发送的凭据不允许我对Web服务进行身份验证。

connect(){

    var credentials = "name=" + mylogin + "&password=" + mypassword;
    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    this.http.post(URLServeur, credentials, {headers: headers}).subscribe(data => {
        if(data.json().success){
            console.log("yes");
            resolve(true);
        }
        else
        {
            console.log("no");
            resolve(false);
        }
    });
}

谢谢

Answer 1

我最终发现，在Angular中，请求的参数存在问题。如果插入太多请求选项，则withCredentials：true会被忽略。

Ionic应用程序中的代码：

var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    var url = "http://localhost"
    var data = "This is my data";

    this.http.post(url, JSON.stringify(data), {withCredentials: true}).subscribe(data => {
        if(data){
            console.log("yes");
        }
        else
        {
            console.log("no");
        }
    });

此外，不要忘记将其添加到服务器上的webConfig文件中：

    <httpProtocol>
     <customHeaders>
        <clear />
        <add name="Access-Control-Allow-Origin" value="http://localhost:8100" />
        <add name="Access-Control-Allow-Headers" value="content-Type,authorization" />
        <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
        <add name="Access-Control-Allow-Credentials" value="true" />
     </customHeaders>
  </httpProtocol>

我希望它会帮助其他人

使用Ionic应用程序进行API身份验证

1 个答案: