使用 Promise 的表单帖子不起作用

Question

我正在 Angular 4 中处理用户注册表单。我的 RestApi 工作正常。我试过使用邮递员。我不知道为什么表格没有发布。

我在控制台标题中收到以下错误：

Request Method: OPTIONS
Status Code: 405 Method Not Allowed

我已经尝试了以下代码。

register.component.html

<form (ngSubmit)="onRegister(userForm)" #userForm="ngForm">
    <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" placeholder="enter email" [(ngModel)]="user.email" name="email" #email = "ngModel" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required>
        <div *ngIf="email.invalid && (email.dirty || email.touched)"
        class="alert alert-danger">
            <div *ngIf = "email.errors?.required">Email field can't be blank</div>
            <div *ngIf = "email.errors?.pattern && email.touched">The email id doesn't seem right</div>
        </div>
    </div>
    <div class="form-group">
        <button type="reset" class="btn btn-default">Cancel</button>
        <button type="submit" class="btn btn-primary" [disabled]="!userForm.form.valid">Submit</button>
    </div>
</form>

register.component.ts

export class RegisterComponent implements OnInit {

    private user: User;
    userForm: FormGroup;
    // constructor(private auth: AuthService, private http: Http) {}
    constructor(private _fb: FormBuilder, private auth: AuthService, private http: Http) { } // form builder simplify form initialization


    ngOnInit() {
        this.user = new User({
            email:"", 
            password: { password: "" , confirmPassword: ""}, 
        })
    }

    onRegister(): void {
        console.log("this is me", this.user);
        this.auth.register(this.user)
        .then((user) => {
            // console.log(user.json());
        })
        .catch((err) => {
            console.log(err);
        });
    }

}

auth.service.ts

@Injectable()
export class AuthService {
    private BASE_URL: string = 'http://myapp.local/public_html';
    private headers: Headers = new Headers({'Content-Type': 'application/json'});

constructor(private http: Http) {}

// register = function(user) {
register(user): Promise<any> {
    console.log("This is registration page service", user);
    let url: string = `${this.BASE_URL}/user`;
    console.log("url", url);
    return this.http.post(url, user).toPromise();
}

}

Answer 1

作为 POST 的一部分，尝试将 contentType 设置为 application/json。为此，您可以在帖子中提供 headers。

register(user): Promise<any> {
    const headers: Headers = new Headers();
    headers.append('Content-Type', 'application/json');

    const requestOptions = new RequestOptions({
        headers: headers
    });

    console.log("This is registration page service", user);
    let url: string = `${this.BASE_URL}/user`;
    console.log("url", url);
    return this.http.post(url, user, requestOptions).toPromise();
}

此外，在服务器端，根据您使用的框架，确保将HttpMethod 指定为Post。

在您的服务代码中，您已定义 Headers 对象，但您并未将其作为请求的一部分发送。

另外，看看这两个处理类似问题的帖子：

OPTIONS 405 (Method Not Allowed)

WebAPI Delete not working - 405 Method Not Allowed

Answer 2

您是否尝试将方法更改为“POST”？可能是您的方法在端点上期望“POST”并且您通过“GET”发送它