帶有主體和標題的Angular 7發布請求

Question

我正在嘗試使用正文和標題發送請求。 以下是我經歷的一些變體，但是在大多數情況下，我在服務器上收到錯誤消息，指出未傳入參數“ key”。

我在郵遞員中嘗試了這個api，並且在那兒工作。 這就是我在Java / Spring Boot中定義方法標頭的方式：

@RequestMapping(value = "/getIssue", method = RequestMethod.POST)
public IssuePojo getIssue(@RequestParam("key") String key, HttpServletRequest request) {

以下是我的角度變化：

public getJiraIssue(key: string): Observable<any> {

    let headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': this.idToken });
    let options = { headers: headers };

    const paramsA = new URLSearchParams();
    paramsA.set('key', key);
    let params = new HttpParams().append('key', key);
    // return this.http.post(this.urlEnvironment.jiraGetIssue(), params, this.getHeaders());
    console.log("headers: ", this.getHeaders());
    // let obj = {
    //   key: key
    // }

    var headersA = new Headers();
    headers.append('Authorization', this.idToken);

    let body = new HttpParams()
    .set('key', key);

    return this.http.post(this.urlEnvironment.jiraGetIssue(), body, {headers: headers});
    // return this.http.post(this.urlEnvironment.jiraGetIssue(), null, {headers: this.getHeaders(), params: params});
  }

似乎正在發送屍體：

但這是我得到的錯誤：

timestamp: "2019-01-30T04:30:40.721+0000", status: 400, error: "Bad Request",…}
error: "Bad Request"
message: "Required String parameter 'key' is not present"
path: "/jira/getIssue"
status: 400
timestamp: "2019-01-30T04:30:40.721+0000"
trace: "org.springframework.web.bind.MissingServletRequestParameterException: Required String parameter 'key' is not present

Answer 1

HttpParams（）用於將查詢字符串參數添加到請求URL（如果需要），然后首先檢查是否在開發者工具請求中添加了該參數，否則api端出現問題

Answer 2

好的，我的理解是您擁有JS / Angular 7前端。 它正在與Java / Spring Boot后端通信，后者又查詢Jira：

    Angular       SpringBoot         Jira
   --------- (1)  ----------- (2) ----------
   (service) --> (controller) --> (Jira API)
             <--              <--
             (4)              (3)

到目前為止正確嗎？

聽起來您可以使用Postman成功地查詢Jira（請求2，響應3），對嗎？

問題是當Angular查詢Spring Boot（請求1）時，您得到HTTP 400: "Required String parameter 'key' is not present" ，對嗎？

這就是我在上面的評論中要問的問題。 問題顯然是您的消息有效負載“ key = WJC-7”不是有效的JSON。 因此請求失敗。

根據您分享的內容，我在這里做了很多“假設”。 然而：

建議：

1. let obj = { key: key }; Angular創建對象： let obj = { key: key }; ，就像您一開始所做的一樣。

2. 確保它完整 （我想Jira API不僅需要“鑰匙”）。

3. 確保您要發送的Angular對象與Spring Boot控制器期望的Java對象匹配（逐字段）。 Spring Boot應該在JSON中自動序列化/反序列化。

4. 讓Angular發送對象（作為“數據”）。 您的“郵件有效負載”！=“ msg標頭”。

5. 一定要檢查被發送和接收的方式（1，2，3和4的上方）各步驟中的有效載荷。 您可以使用Fiddler，Wireshark或跟蹤日志記錄來執行此操作。

希望有幫助！

PS：這是Angular客戶端可能調用的Java Spring Boot控制器的假設示例：

...
@RestController
@CrossOrigin(origins = "http://localhost:4200")
public class TodoResource {

    @Autowired
    private TodoHardcodedService todoService;

    // GET All todos
    @GetMapping("/users/{username}/todos")
    public List<Todo> getAllTodos(@PathVariable String username) {
        return todoService.findAll();
    }
...

這是相應的示例Java“ Todo”對象：

public class Todo {
    private long id;
    private String username;
    private String description;
    private Date targetDate;
    private boolean isDone;
    ...

Answer 3

使用此HHTP服務類在正文中發送參數，也可以在標題中發送

 import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; import { Observable, empty } from 'rxjs'; import { catchError, timeout } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class HttpService { constructor(private http: HttpClient) { } private getHeaders(headersConfig?: object): HttpHeaders { return new HttpHeaders({ 'Content-Type': 'application/json', ...headersConfig, }); } get(url: string, params: HttpParams = new HttpParams(), headers: Object): Observable<any> { let finalHeaders = this.getHeaders(); if (headers) { for (let key in headers) { finalHeaders = finalHeaders.append(key, headers[key]); } } return this.http.get( url, { headers: finalHeaders, params } ).pipe(timeout(10000)).pipe(catchError(this.handleError('Get request'))); } put(url: string, body: Object = {}, headers: Object): Observable<any> { let finalHeaders = this.getHeaders(); if (headers) { for (let key in headers) { finalHeaders = finalHeaders.append(key, headers[key]); } } return this.http.put( url, body, { headers: finalHeaders } ).pipe(timeout(10000)).pipe(catchError(this.handleError<any>('put request'))); } post(url: string, body: Object = {}, headers: Object): Observable<any> { let finalHeaders = this.getHeaders(); if (headers) { for (let key in headers) { finalHeaders = finalHeaders.append(key, headers[key]); } } return this.http.post( url, body, { headers: finalHeaders } ).pipe(timeout(10000)).pipe(catchError(this.handleError<any>('post request'))); } /** * Handle Http operation that failed. * Let the app continue. * @param operation - name of the operation that failed * @param result - optional value to return as the observable result */ private handleError<T>(operation = 'operation', result?: T) { return (error: any): Observable<T> => { return empty();//of(result as T); }; } } 

Answer 4

所以關鍵是'Content-Type': 'application/json',由於我正在發送json，因此在服務器端它希望將其映射到Object。 我也設法使它也可以與字符串一起使用，但是隨后我必須自己在服務器上解析字符串，這不是我想要的。

所以'Content-Type': 'text/plain', =>映射到=> @RequestBody String key

和'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8', =>映射到=> @RequestParam String key, @RequestParam String test,

因此，來自Angular的帖子將如下所示：

const httpBody = new HttpParams()
      .set('key', 'key')
      .set('test', 'test');
    return this.http.post(endPoint, httpBody, this.getArgHeaders());

  private getArgHeaders(): any {
      const httpOptions = {
        headers: new HttpHeaders({
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        })
      };
      return httpOptions;
  }