Question

我使用Angular 4开发了一个表单。在那个表单中，我必须使用Angular 4使用post方法发送表单数据。为此，我已经使用Postman进行了测试，数据正常。我必须使用Authorization类型作为基本身份验证用户名和密码。

在标题中，我必须将Content-Type作为application / hal + json，Authorization as Basic和X-CSRF-Token传递，最后在正文中我必须发送一些原始的json数据。请看下面共享的屏幕。

那么使用Angular如何实现呢？任何人都可以帮我吗？为达到这个目的，我很震惊。

我使用的表格是一个对话框：

<div class="container">
<app-dialog [(visible)]="showDialog">
    <form class="form-horizontal">
    <div style="background-color:#363636; color:#ffffff; padding: 7px;
    margin: -12px -12px 12px -12px;">ADD NEW INVOICE</div>
    <div><label>Request ID *</label><input type="text"></div>
    <div><label>Date *</label>

      <my-date-picker name="mydate" [options]="myDatePickerOptions"
      required></my-date-picker>

    </div>
    <div><label>Category *</label></div>
    <div><label>Details *</label></div>
    <div><label>Job (Optional)*</label></div>
    <div><label>Select Upload</label>
  <p>
    Single: <input type="checkbox" name="uploadtype" value="single" />
    Weekly: <input type="checkbox" checked name="uploadtype" value="weekly" />
    Monthly: <input type="checkbox" name="uploadtype" value="monthly" /><br />
  </p>
    </div>
    <div>Upload Document *: <span>
      <input type="file" name="pic" accept="image/*">

    </span></div>
    <div>Amount *</div>
    <button type="submit" class="btn btn-success" (click)="onSubmit()">Submit</button>
  </form>
  </app-dialog>
</div>

所以我的问题是如何将表单数据发送到服务器。

我创建的服务是：

private headers = new Headers();
    headers.append("Authorization", "Basic " + btoa(username + ":" + password)); 
    headers.append("Content-Type", "application/x-www-form-urlencoded");
    getInvoiceDetails(){
            let headers = new Headers();
            this.createAuthorizationHeader(headers);
            return this.http.get(this.config.apiUrl + 'api/supplier-invoice/121', { headers: headers })
            .map(response => response.json());
        }

我非常对此感到困惑，因为我是这个Angular和身份验证概念的新手。任何人都可以帮助我吗？

Answer 1

如果你想在正文中发送数据，请使用Post请求，我也看到postman屏幕截图作为post posttion但在你正在使用get代码的代码中。 PFB发布请求的示例代码

registerUser(registration: RegistrationTO): Promise<String> {
    let headers = new Headers();
    let body = JSON.stringify(
      {
        "userName": registration.userId,
        "emailId": registration.emailId,
        "userId": registration.userId
      }
    );
    headers.append('Content-Type', 'application/json');
    let params:URLSearchParams = new URLSearchParams();
    let requestOption: RequestOptionsArgs =
      {search: params,  headers: headers };
    return this.http
      .post(RegistrationUrl, body, requestOption)
      .toPromise()
      .then(res => res.json())
      .catch((err)=>{
        this.handleError(err);
      });
  }

Answer 2

public login(event):
Observable<HttpResponse<Config>> {
var username = event.target.elements[0].value;
var password = event.target.elements[1].value;
let headers = new HttpHeaders();
headers = headers.append('Authorization', "Basic "+btoa(username+':'+password));

console.log(headers);

return this.http.get<Config>(
  "http://localhost:8081/users/login",  {
    headers, observe: 'response',
    withCredentials: true
  });

}

withCredentials：true足以处理cookie

如何使用基本身份验证与用户名，密码加上令牌4

2 个答案: