Angular 14 與 spring-boot 后端 CORS 問題

Question

I have an angular application which is running on my notebook at http://localhost:4200 I have a Java backend server where placed some rest api.

我試圖在 java 后端調用一個簡單的 GET 方法，但我總是收到 CORS 錯誤。

從源“http://localhost:4200”訪問“http://javabeckendserver:8060/pbackend/api/sa/tasktypes”處的 XMLHttpRequest 已被 CORS 策略阻止：對預檢請求的響應未通過訪問控制檢查：請求的資源上不存在“Access-Control-Allow-Origin”header。

我閱讀了這篇文章https://angular.io/guide/build並遵循了代理配置，但錯誤消息相同。

所以我創建了proxy.conf.json文件，內容如下：

{
  "/pbackend/*": {
    "target": "http://javabeckendserver:8060",
    "secure": false,
    "logLevel": "debug"
  }
}

我在服務標簽的 angular.json 文件中將其配置為選項：

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular-app:build",
            "proxyConfig": "src/proxy.conf.json"
          }

更新：我使用 Http 攔截器向 http 請求 header 添加更多屬性：

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    let customAuthType = this._tokenService.hasToken() ?  'Bearer '.concat(this._tokenService.getToken()): 'Basic ****';

    const headers = request.headers.set('Authorization', customAuthType)
                                   .set('Content-Type', 'application/json');
    return next.handle(request.clone({ headers }));
}

在“****”處有正常的 Base64 編碼字符串。

這是我在后端的方法：

    @PreAuthorize("hasRole('ROLE_TASK_TYPE_READER')")
    @GetMapping("/tasktypes")
    public ResponseEntity<List<TaskTypeDto>> findAllTaskType() {
        log.info(">> findAllTaskType()");
        return ResponseEntity.ok(taskTypeService.findAll());
    }

我已經用 postman REST API 進行了測試，它按預期工作，但不是來自 ZC31C335EF37283C451B178。

我做錯了什么？

Answer 1

由於服務（Angular 和后端 java）都在 2 個不同的端口號上運行，因此來自 Angular 到 java 的請求將被視為外部請求。 As the error message says " No 'Access-Control-Allow-Origin' header is present on the requested resource " I would advice you to annotate your java side controller with @CrossOrigin and see if your API request from Angular gets served.

可以在此處找到有關 CrossOrigin 的更多詳細信息 - CrossOrigin