Question

我正在尝试从角度发送一些数据来表达。我创建了auth.service，并创建了一个函数，该函数在其中将数据从输入字段发布到我的Express服务器中。我感觉是这条线特别打破了它，但是我不知道为什么或者我是否正确return this.http.post<any>(this._registerUrl, user);

因为如果我在该行之前登录user，它仍然是实际的用户对象。如果我在Express服务器上的POST请求中登录req.body，它将记录{}。我认为这只是该行的另一个原因是因为与Postman进行后期请求可以正确创建帐户，并且用户对象位于req.body

中

auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

    private _registerUrl = 'http://localhost:3000/register';
    private _loginUrl = 'http://localhost:3000/login';

    constructor(private http: HttpClient) { }

    registerUser(user) {
        console.log(user)
        return this.http.post<any>(this._registerUrl, user);
    }

    loginUser(user) {
        return this.http.post<any>(this._loginUrl, user);
    }

}

register.component.ts

import { Component, OnInit } from '@angular/core';

import { AuthService } from '../auth.service';

@Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {

    registerUserData = {}

    constructor(private _auth: AuthService) { }

    ngOnInit() { }

    registerUser() {

        this._auth.registerUser(this.registerUserData)
            .subscribe(
                res => {
                    console.log('_auth.registerUser', res)
                },
                err => console.log(err)
        )

    }

}

更新：我创建了一个新的应用程序，但似乎仍然在使用非常简单的设置时遇到麻烦。使用此设置，我有三个console.logs。前两个日志正确记录了用户对象，但是前三个日志记录了空白正文。 POST请求有效，因为我像这样捆绑了测试字符串（这是post请求功能）

res.send({
    body: req.body,
    test: 'foobar'
});

第三个console.log获取此信息：

{
    body: {},
    test: "foobar"
}

当我发送邮件时，它会显示一个POST请求，其有效负载为{username: "ff", password: "ff"}（我输入的内容），状态为200。

这就是我现在拥有的：

register.component.html

<form>
    <div class="form-group">
        <input [(ngModel)]="registerUserData.username" name="username" type="text">
    </div>
    <div class="form-group">
        <input [(ngModel)]="registerUserData.password" name="password" type="password">
    </div>
    <button (click)="registerUser()" type="button">Register</button>
</form>

register.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {

    registerUserData = {}
    constructor(private _auth: AuthService) { }

    ngOnInit() { }

    registerUser() {
        console.log('1', this.registerUserData)
        this._auth.registerUser(this.registerUserData)
            .subscribe(
                res => console.log('3', res),
                err => console.log('3 err', err)
            )
    }

}

auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class AuthService {

    private _registerUrl = 'http://localhost:3000/register'

    constructor(private http: HttpClient) { }

    registerUser(user) {
        console.log('2', user);
        return this.http.post<any>(this._registerUrl, user);
    }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';


import { AppComponent } from './app.component';
import { RegisterComponent } from './register/register.component';
import { AuthService } from './auth.service';


@NgModule({
    declarations: [
        AppComponent,
        RegisterComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        AppRoutingModule
    ],
    providers: [AuthService],
    bootstrap: [AppComponent]
})
export class AppModule { }

更新2：使用Postman并将标头设置为application/x-www-form-urlencoded，同时还使用x-www-form-urlencoded作为设置了关键用户名的正文，这将返回正确的响应，并带有用户名。尽管如果我将邮递员的正文切换为Raw并使用JSON（application / json）选项，并将带有用户名键的对象放在正文中，它不会返回正确的响应。因此，也许这与我的Express服务器中的cors设置有关？

在我的Express服务器中，我需要cors，并且在启动Express服务器后，我具有app.use(cors())，因为我没有设置任何选项。也许这是标题问题？

对象无法正确发送角度信息

0 个答案: