Angular 文件上傳到 micronaut rest api 403 錯誤

Question

我正在嘗試將多個文件上傳到 micronaut Rest API。 使用 postman 和 swagger，上傳文件在 Micronaut Rest API 中工作正常，但是，使用 Angular 應用程序，post 方法拋出 403 http 錯誤。

Micronaut控制器方法

 public Maybe<HttpResponse<?>> post(Publisher<CompletedFileUpload> images) {
            return this.iGoogleCloudService.uploadObject(images).flatMap(item -> {
               if (item.size() > 0)
                   return Maybe.just(HttpResponse.created(item));
               else
                   return Maybe.just(HttpResponse.serverError(ConstantValues.TAG_FALLBACK));
            });
    }

角度應用

HTML

<div class="drop-zone w-75" file-drop (files)="onSelectFile($event)"
    [ngClass]="{'disableDiv': dragDropDisable}">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="50" height="43" viewBox="0 0 50 43">
      <path
        d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z" />
    </svg>
    <div fxLayout="row" fxLayoutAlign="center center">
      <input id="file" type="file" accept="image/*" (change)="onSelectFile($event.target.files)">
      <label for="file"><strong>Choose a file</strong><span class="dragndrop"> or drag it here</span>.</label>
    </div>
  </div>

成分

onSelectFile(files: FileList) {
    uploadFiles = [];
    if (files.length === 0) {
      return;
    }

    for (var i = 0; i < files.length; i++) {
      this.uploadFiles.push(files[i]);
    }
  }

onsubmit(){
    this.photoService.uploadImage(this.uploadFiles).subscribe()
}

服務

uploadImage(photos: any): Observable<any> {
    const headers = new HttpHeaders({ 'enctype': 'multipart/form-data' });
    const formData = new FormData();
    for (let index = 0; index < photos.images.length; index++) {
      formData.append('images', photos.images[index], photos.images[index].name);
    }
    return this.http.post(`http://localhost:8080/api/v1/image`, formData, { headers: headers });
  }

請求表單瀏覽器

Request URL: http://localhost:8080/api/v1/image
Request Method: POST
Status Code: 403 Forbidden
Remote Address: [::1]:8080
Referrer Policy: strict-origin-when-cross-origin

Connection: keep-alive
Content-Length: 96620
Content-Type: application/json
enctype: multipart/form-data
Host: localhost:8080
Origin: http://localhost:4200
Referer: http://localhost:4200/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
Sec-GPC: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.115 Safari/537.36

------WebKitFormBoundary5qeys6I6NYaAJ12U
Content-Disposition: form-data; name="images"; filename="Untitled-1.png"
Content-Type: image/png


------WebKitFormBoundary5qeys6I6NYaAJ12U
Content-Disposition: form-data; name="images"; filename="image 3.33.17 pm.png"
Content-Type: image/png


------WebKitFormBoundary5qeys6I6NYaAJ12U--

郵遞員請求有效

curl --location --request POST 'http://localhost:8080/api/v1/image' \
--form 'images=@"/Users/macbook/Desktop/Untitled-1.png"'

Answer 1

我注意到你的角度代碼中的這個標題'enctype'。 但是 enctype 不是 http 標准頭，你應該使用 Content-Type: multipart/form-data; 給你標題