Angular 14 with spring-boot backend CORS issue

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.

I am trying to call a simple GET method on the java backend but I always get CORS error.

Access to XMLHttpRequest at 'http://javabeckendserver:8060/pbackend/api/sa/tasktypes' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I read this article https://angular.io/guide/build and I have followed the proxy configuration, but the error message is the same.

So I have created proxy.conf.json file with this content:

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

I configured it in angular.json file at serve tag as an option:

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

Update: I use a Http Interceptor to add more property to the http request header this way:

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 }));
}

At the '****' has normal Base64 encoded string.

And here my method at the backend side:

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

I have tested with postman the REST API and it worked fine as expected but not from Angular app.

what have I done wrong?

try to change `"proxyConfig": "src/proxy.conf.json"` into `"proxyConfig": "proxy.conf.json"` — Panagiotis Bougioukos, Jul 27 '22 at 11:58
also try to modify `"/pbackend/*"` into `"/pbackend"`. Either this or the above might be enough to make it working — Panagiotis Bougioukos, Jul 27 '22 at 12:04

score 0 · Accepted Answer · answered Jul 27 '22 at 12:44

0

Since both the services (Angular and backend java) are running on 2 different port numbers, the request coming from Angular to java will be considered as an external one. 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.

More details about CrossOrigin can be found here - CrossOrigin

answered Jul 27 '22 at 12:44

aamirencodes

68
1
1
7

I am using this annotation on the affected controller. – Zaosz Jul 27 '22 at 13:10
by the way, I checked the request header on the server side and this cause the issue somehow because the 'Authorization' is missing. I don't know why because I use a Http Interceptor to extends the Request header – Zaosz Jul 27 '22 at 13:31
I updated the original description. – Zaosz Jul 27 '22 at 13:39
Since we are unaware at what end the issue could be, I would advise you to begin your investigation in the backend side of application, since the error mentions "No 'Access-Control-Allow-Origin' header is present on the requested resource" which according to me is the error of target endpoint. Below link might be helpful https://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check – aamirencodes Jul 27 '22 at 13:51
I have checked everything what you mentioned on the backend side and you ware right. The spring boot configuration was wrong. I fixed that and it is working fine now. Thank you for your help. – Zaosz Jul 28 '22 at 10:48

Angular 14 with spring-boot backend CORS issue

1 Answers1