角删除POST/PUT请求上的授权头

Question

我有一个Angular应用程序，可以与heroku上托管的API进行通信。简单地说，这是一个电影数据库，您可以在其中添加电影并从收藏夹中删除。

添加电影的请求：

  addMovie(username: any, movieId: any): Observable<any> {
    const token = localStorage.getItem('token');
    return this.http.post(apiUrl + `users/${username}/movies/${movieId}`, {headers: new HttpHeaders(
      {
        Authorization: 'Bearer ' + token,
      }
    )}).pipe(
      map(this.extractResponseData),
      catchError(this.handleError)
    );
  }

以及删除电影：

  deleteMovie(username: any, movieId: any): Observable<any> {
    const token = localStorage.getItem('token');
    return this.http.delete(apiUrl + `users/${username}/movies/${movieId}`, {headers: new HttpHeaders(
      {
        Authorization: 'Bearer ' + token,
      }
    )}).pipe(
      map(this.extractResponseData),
      catchError(this.handleError)
    );
  }

两个请求完全相同，但POST请求出于某种原因会删除授权标头，而DELETE请求则不会。当查看这两个请求的飞行前请求时，POST请求的飞行前甚至不会请求授权标头的余量，而DELETE请求的飞行前请求会删除授权标头。

POST的起飞前：

curl "https://somesite.com/users/tester/movies/6123fbc6a2a0fea2b1f81fd1" ^
  -X "OPTIONS" ^
  -H "Connection: keep-alive" ^
  -H "Accept: */*" ^
  -H "Access-Control-Request-Method: POST" ^
  -H "Access-Control-Request-Headers: content-type" ^
  -H "Origin: http://localhost:4200" ^
  -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36" ^
  -H "Sec-Fetch-Mode: cors" ^
  -H "Sec-Fetch-Site: cross-site" ^
  -H "Sec-Fetch-Dest: empty" ^
  -H "Referer: http://localhost:4200/" ^
  -H "Accept-Language: de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7" ^

删除的飞行前：

curl "https://somesite.com/users/tester/movies/61240c5da2a0fea2b1f81fd9" ^
  -X "OPTIONS" ^
  -H "Connection: keep-alive" ^
  -H "Accept: */*" ^
  -H "Access-Control-Request-Method: DELETE" ^
  -H "Access-Control-Request-Headers: authorization" ^
  -H "Origin: http://localhost:4200" ^
  -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36" ^
  -H "Sec-Fetch-Mode: cors" ^
  -H "Sec-Fetch-Site: cross-site" ^
  -H "Sec-Fetch-Dest: empty" ^
  -H "Referer: http://localhost:4200/" ^
  -H "Accept-Language: de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7" ^

用PUT替换POST会导致相同的问题。

Answer 1

POST请求中的第二个参数是正文。POST请求中的第三个参数是选项。DELETE请求中的第二个参数是选项。目前，您正在POST请求的正文中发送身份验证标头，但它属于选项。

你可以送一个空的尸体

addMovie(username: any, movieId: any): Observable<any> {
  const token = localStorage.getItem('token');
  return this.http.post(apiUrl + `users/${username}/movies/${movieId}`, {}, {headers: new HttpHeaders(
    {
      Authorization: 'Bearer ' + token,
    }
  )}).pipe(
    map(this.extractResponseData),
    catchError(this.handleError)
  );
}