Form post using promise not working

Question

I am working on user registration form in Angular 4. My RestApi is working fine. I have tried using postman. I dont know why the form is not being post.

I get following error in console header:

Request Method: OPTIONS
Status Code: 405 Method Not Allowed

I have tried the following code.

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

As part of the POST, try set the contentType to application/json. You do this by supplying the headers to your post.

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();
}

Also, on the server side, depending on the framework that you use, make sure that you specify HttpMethod as Post.

In your service code you have defined Headers object but you are not sending it as part of your request.

In addition, have a look at these two posts that deal with a similar issue:

OPTIONS 405 (Method Not Allowed)

WebAPI Delete not working - 405 Method Not Allowed

Answer 2

Did you try by changing method to "POST" ? Could be the case that your method expects "POST" on the end point and you're sending it via "GET"