如何使用的离子2角2 HTTP POST方法？

Question

我现在创建离子2应用注册和认证的Stormpath。当我注册的用户我用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服务器的响应？

Answer 1

我有同样的问题，请转到Chrome扩展和搜索插件CORS并添加你最喜欢的插件，然后再启用该插件会工作

Answer 2

你可以试着改变你的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;
    }
  }
});

Answer 3

在离子最新版本，如果您使用的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"
    }
  ]
}

现在，当你调用API从http使用，而不是/accounts像https://api.stormpath.com/v1... URL，

....
    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