如何在離子2和角2上使用http post方法？

我現在正在創建Ionic 2應用程序來註冊並向Stormpath進行身份驗證。當我註冊用戶時，我使用了http post方法。以下功能在那裏提供。如何在離子2和角2上使用http post方法？

register(username: string, email: string, password: string, givenname: string, surname: string){ 
 
    var headers = new Headers(); 
 
    headers.append('content-type', 'application/json;charset=UTF-8'); 
 
    headers.append('Access-Control-Allow-Origin','*'); 
 
    let options= new RequestOptions({headers: headers}); 
 
    
 
    var url = 'https://api.stormpath.com/v1/tenants/1QI0gxrvZNfYAFsamRTwbf/accounts'; 
 

 
    var data = JSON.stringify({ 
 
     surname: surname, 
 
     username: username, 
 
     givenName: givenname, 
 
     email: email, 
 
     password: password 
 
    }); 
 

 
    this.http.post(url, data, options).map(res=>res.json()).subscribe(data=>{ 
 
     console.log(data) 
 
    }, err=>{ 
 
     console.log("Error!:", err.json()); 
 
    }); 
 
}

以及使用該功能碼爲如下。

signup(form){ 
 

 
    console.log('Pressed Signup button.') 
 

 
    let username = form.value.username, 
 
     email = form.value.email, 
 
     password = form.value.password, 
 
     givenName = form.value.givenName, 
 
     surname = form.value.surname; 
 

 
    this.stormpathService.register(username, email, password, givenName, surname); 
 

 
    this.navCtrl.pop(); 
 
    }

的HTML文件是：

<ion-content padding> 
 
    <form #signupForm="ngForm" (ngSubmit)="signup(signupForm)"> 
 
    <ion-list style="margin-bottom: 25%;"> 
 
     <ion-item> 
 
     <ion-label floating>GivenName</ion-label> 
 
     <ion-input [(ngModel)]="givenName" name="givenName" type="text" required=""></ion-input> 
 
     </ion-item> 
 
     <ion-item> 
 
     <ion-label floating>SurName</ion-label> 
 
     <ion-input [(ngModel)]="surname" name="surname" type="text" required=""></ion-input> 
 
     </ion-item> 
 
     <ion-item> 
 
     <ion-label floating>Username</ion-label> 
 
     <ion-input [(ngModel)]="username" name="username" type="text" required=""></ion-input> 
 
     </ion-item> 
 

 
     <ion-item> 
 
     <ion-label floating>Email</ion-label> 
 
     <ion-input [(ngModel)]="email" name="email" type="text" ></ion-input> 
 
     </ion-item> 
 

 
     <ion-item> 
 
     <ion-label floating>Password</ion-label> 
 
     <ion-input [(ngModel)]="password" name="password" type="password" required=""></ion-input> 
 
     </ion-item> 
 
    </ion-list> 
 

 
    <div style="margin-bottom: 8%;"> 
 
     <button ion-button type="submit" color="light" full > Sign up </button> 
 
    </div> 
 

 
    </form> 
 
</ion-content>

錯誤畫面：

爲什麼我沒有從stormpath服務器獲得響應？

來源

2016-12-05 Peter Berzins

了'url'不支持跨起源請求，你應該檢查是否有stormpath支持CORS – Ivaro18

也是另外一個API;在你的組件的構造函數中設置你的頭文件。標題可以在應用程序的生命週期中設置一次。 – JoeriShoeby

它是因爲CORS，嘗試做一個構建，在設備中不會發生CORS的免除，也可以用於開發，您可以在Chrome [Allow-Control-Allow-Origin：*]（https：// chrome）中使用此擴展。 google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi） – JoxieMedina

你可以嘗試轉換你的http請求並添加你的頭文件嗎？

$http.post('yoururl', { 
    foo: 'bar' 
    }, { 
    transformRequest: { 
     body: function(data, headersGetter) { 
     return myTransformFn(data); 
    }, 
    headers: function(data, headersGetter) { 
     var headers = headersGetter(); 
     headers['Content-Type'] = 'x-www-form-urlencoded'; 
     return headers; 
    } 
    } 
});

來源

2017-03-10 18:20:12 SimonBerton

我有同樣的問題，請轉到Chrome擴展和搜索插件CORS並添加你最喜歡的插件，然後再啓用該插件將工作

來源

2017-08-22 04:50:20

在離子最新版本，如果你是使用ionic serve commnad，那麼你必須使用代理服務器，以防止預檢和CORS問題，

首先添加API路徑和URL中ionic.config.json文件中像

{ 
    "name": "APP-NAME", 
    "app_id": "", 
    "proxies": [ 
    { 
     "path": "/accounts", 
     "proxyUrl": "https://api.stormpath.com/v1/tenants/1QI0gxrvZNfYAFsamRTwbf/accounts" 
    } 
    ] 
}

現在，雖然從http調用您的API使用/accounts URL，而不是像https://api.stormpath.com/v1...，

.... 
    var url = '/accounts'; // use the Proxy Path here instead of Stormpath API URL 

    var data = JSON.stringify({ 
     surname: surname, 
     username: username, 
     givenName: givenname, 
     email: email, 
     password: password 
    }); 

    this.http.post(url, data, options).map(res=>res.json()).subscribe(data=>{ 
     console.log(data) 
    }, err=>{ 
     console.log("Error!:", err.json()); 
    }); 
....

讓你必須重新運行命令ionic serve上述變化後。

不過，如果你得到的問題則是指Handling CORS Issues In Ionic

來源

2017-11-13 04:38:04

如何在離子2和角2上使用http post方法？

回答

相關問題