开发者问题收集

Angular HTTP 请求错误:“发布有效请求”

2018-06-19
1627

我是 Angular 新手。我正在创建注册功能,但当我发布请求时,它给出了错误:“发布有效请求”。 您能检查一下我的代码并告诉我我做错了什么吗?

服务


     import { Injectable, OnInit } from '@angular/core';
        import {HttpModule, Http,Response,Headers, RequestOptions,Request,RequestMethod} from '@angular/http';
        import 'rxjs/add/operator/map';
        import { Observable } from "rxjs/Rx";
        import { User } from './user';
        import { HttpClient,HttpHeaders, HttpRequest } from '@angular/common/http';


        @Injectable({
          providedIn: 'root'
        })
        export class RegisterService implements OnInit {

          posts_Url: string = 'http://localhost:8080/GradeMyDrawings/teacher/register';

            constructor(private http: HttpClient) {

            }

            ngOnInit () {

            }

          registerUser(user:User) {     
             return this.http.post(this.posts_Url, JSON.stringify(user))
              .map((response: Response) => response);           
          }
        }

注册组件


    import {Component, OnInit,Input} from '@angular/core'
        import { CommonService }  from '../../_common/services/common.service';
        import { CommonComponent }  from '../../_common/common.component';
        import { User } from '../../shared/user';
        import { RegisterService } from '../../shared/register.service';
        import { Router, RouterModule } from '@angular/router';
        import {HttpModule, Http,Response,Headers, RequestOptions} from '@angular/http';
        import {HttpClient, HttpErrorResponse} from '@angular/common/http';



        @Component ({
            selector: 'app-login',
            templateUrl: './signup.component.html',
            styleUrls: ['./signup.component.css'],
            providers:[RegisterService]
        })

        export class SignUpComponent  implements OnInit {
         public model:any = [];
            constructor (private _resterservie:RegisterService, private router:Router) {  }    


            ngOnInit () {

            }

            register()
            {
              this._resterservie.registerUser(this.model)
                .subscribe(
                  data => {
                    console.log("Successful");
                  },
                  error=> {
                    console.log("Error");
                  }
                )   
            }


        }

注册 html

              <div class="form-group">
                  <input type="text" name="tTitle" [(ngModel)]="model.tTitle" #tTitle = "ngModel"  placeholder="Teacher Title" class="form-control" id="tTitle" />
              </div>
              <div class="form-group">
                  <label id="tq1"><strong>Q1:</strong>What is your Birth Date</label>
                  <input type="text" name="tans1" [(ngModel)]="model.tans1" #tans1 = "ngModel"  placeholder="Security Q1" class="form-control" id="tans1" />
              </div>
              <div class="form-group">
                  <label id="tq2"><strong>Q2:</strong> What is your favourite Sports:</label>
                  <input type="text" name="tans2" [(ngModel)]="model.tans2" #tans2 = "ngModel"  placeholder="Security Q2" class="form-control" id="tans2" />
              </div>
              <div class="form-group">
                  <label id="tq3"><strong>Q3:</strong> What is your favourite Color:</label>
                  <input type="text" name="tans3" [(ngModel)]="model.tans3" #tans3 = "ngModel"  placeholder="Security Q3" class="form-control" id="tans3" />
              </div>
              <div class="form-group">
                  <select class="form-control" id="tSignUpType" name="tsignUpType" [(ngModel)]="model.tsignUpType" #tsignUpType = "ngModel">
                      <option>ADMIN</option>
                      <option>TEACHER</option>

                  </select>
              </div>
              <div class="form-group">
                  <input type="text" name="Email" [(ngModel)]="model.Email" #Email = "ngModel"  placeholder="Email" class="form-control" id="tSignUpEmail" />
              </div>

              <div class="form-group" style="position:relative">
                  <div id="pas-mismatch" style="color: red; position: absolute; top: -18px;"></div>
                  <input type="password"  name="password" [(ngModel)]="model.password" #password = "ngModel"  placeholder="Password" class="form-control" id="tSignUpPassword" />
              </div>
              <div class="form-group">
                  <input type="password" name="password2" [(ngModel)]="model.password2" #password2 = "ngModel"  placeholder="Retype password" class="form-control" id="tconfirmpassword" />
              </div>
              <div class="form-group">
                  <input type="submit" name="signup_submit" class="btn btn-primary"  value="Sign up" id="SignUpbtn" />
                  <button class="btn btn-primary signIn">Sign In</button>
              </div>
              <div class="alert alert-success successful_alert" style="display:none;">
                  Successfully Created your Account, You can login Now!
              </div>

          </form>

用户界面


     export interface User {
                        'tsignUpUserid':string;
                        'tsignUpDisplayName':string;
                        'tschoolid':string;
                        'tschoolName':string;
                        'tschoolAd1':string;
                        'tschoolAd2':string;
                        'tschoolZip':string;
                        'tschoolCity':string;
                        'tschoolState':string;
                        'tTitle':string;
                        'tq1':string;
                        'tq2':string;
                        'tq3':string;
                        'tans1':string;
                        'tans2':string;
                        'tans3':string;
                        'tsignUpType':string;
                        'tsignUpPassword':string;
                        'tSignUpEmail':string;

            }

3个回答

看起来您缺少 .pipe。请按如下方式更新您的代码。

registerUser(user: User): Observable<any> {
    return this.http.post(this.posts_Url, user)
        .pipe(
        map((response: Response) => response)
    );
}

另请注意:
1. 请检查您是否确实需要将用户对象字符串化。如果您的 api 接受这种方式,您可以直接传递 json 对象。 2. 您不需要在服务类中实现“OnInit”。

Prakash Dale
2018-08-05

在您的服务器配置中添加 Access-Control-Allow-Origin 或在处理程序文件中添加以下标头。

此示例适用于 php。

<?php
 header("Access-Control-Allow-Origin: *");
 header('Content-Type: application/json');
 ?>

这是常见问题之一,否则请注释掉您从浏览器控制台获取的错误。

shakthi nagaraj
2019-02-06

请在您的帖子请求中添加 headers

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

 return this.http.post(this.posts_Url, JSON.stringify(user),options).map(
   (response: Response) => <any>response.json()
 ); 
safeena rasak
2018-10-06