我正在使用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();
}
}
答案 0 :(得分: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
个对象,但您并未将其作为请求的一部分发送。
此外,看看这两个处理类似问题的帖子:
答案 1 :(得分:-1)
您是否尝试将方法更改为“POST”?可能是你的方法在终点上需要“POST”并且你通过“GET”发送它的情况