Question

我对最新版本的Angular很新。 this.http .post(this.bikesUrl, data, { headers: this.headers }) .toPromise() .then(res => res.json().data) .catch(this.handleError);似乎无法在我的应用程序中的任何位置工作。我尝试过这样的事情：

this.http.post(this.config.apiEndpoint+'/authenticate', JSON.stringify({ username: username, password: password }))
        .map((response: Response) => {
            // login successful if there's a jwt token in the response
            let token = response.json() && response.json().token;
            if (token) {
                // set token property
                this.token = token;

                // store username and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));

                // return true to indicate successful login
                return true;
            } else {
                // return false to indicate failed login
                return false;
            }
        }).subscribe(result => {
      if (result === true) {
        // login successful
        this.router.navigate(['/']);
      } else {
        // login failed
        this.error = 'Username or password is incorrect';
        this.loading = false;
      }
    })

...或...

 var json = {var1: 'test'};
var params = 'json='+json;
let headers = new Headers();
headers.append('Content-Type', 'application/json');
http.post("http://example.com/infoarray.php", params, headers ).subscribe (re => {
  console.log(re)
})

...或...

from django.contrib.auth.hashers import make_password

class Student(models.Model):

    def set_password(self, raw_password):
        self.password = make_password(raw_password)

当我在浏览器中运行它时，几乎就像脚本不在那里。我看到检查员没有要求。我正在使用Angular CLI

Answer 1

我的错误。我一直在关注一个包含用于测试的假后端脚本的教程，该脚本已经影响了所有请求。

以防有人遇到同样的问题或者一直关注本教程; http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial确保禁用虚假后端。

我只是删除了这些提供商;

import { fakeBackendProvider } from './_helpers/fake-backend';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { BaseRequestOptions } from '@angular/http';

Answer 2

这就是我在Ionic 3 App中的表现。

//in my ApiProvider

let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });

http.post("http://localhost/login", params, options)
  .map(this.onLoginSuccess)
  .catch(this.onError);

onLoginSuccess(res: Response): Observable<LoginUserResponse> {
 return res.json();
}

private onError(error: Response | any) {
  console.error(error.message || error);
  return Observable.throw(error.message || error);
}

Answer 3

你的http是否正确实例化？请尝试以下方法，它确实有效：

import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class MyService {
    constructor(private http: Http) {}

    // Post
    MyPost() {
        this.http.post(.....);
      }
  }

如果仍然无法正常工作，您的数据可能会出错，例如this.config，username，password ...... all all？

Answer 4

我们通常做的其他错误是忘记从@ angular / http导入Headers。它不会给出任何错误，但请求将不起作用。请尝试将标题导入为 import {Headers, Http} from '@angular/http';

角4 http.post不发送或工作

4 个答案: