How to handle 301 Http Redirect in Angular such that SEO doesn't get affected and without CORS issue?

Question

Problem Statement

• I have an Angular web app which is a e-commerce platform and for obvious reasons it has different products (more than 2000 to be specific).
• Earlier the routes for individual products was something else, however, now I want to migrate those products to a different URL.
• Please note, I don't want to affect the SEO performance of the webapp. This is important as without the SEO part, this is a very easy to implement solution.

Solution So Far

I have planned a solution so far and it works to some extent. Here is the solution,

• Every product in the database has a backward compatible URL with respect to them.
• Whenever, a specific product URL gets a hit, I am rendering a dummy component. Inside the component, I am calling an API (Spring Boot app) along with the browser URL, to get its appropriate redirection URL.
• The API doesn't return a JSON response. Instead, it performs a 301 Redirection to the appropriate redirection URL.

Code Sample of the API

 @GetMapping(
        value = RequestMapper.PRODUCT_COMPATIBILITY_URL
    )
    public ResponseEntity<Object> productCompatibilityRedirect(
        @RequestParam String slug
    ) {

        String decodedUrl = URLDecoder.decode(slug, StandardCharsets.UTF_8);

        String redirectUrl = this.redirectService.getCompatibleProductUrl(
            decodedUrl
        );

        HttpHeaders headers = new HttpHeaders();
        headers.add(HttpHeaders.LOCATION, redirectUrl);

        return new ResponseEntity<>(headers, HttpStatus.MOVED_PERMANENTLY);
    }

Code Sample in the Angular Dummy Component

public ngOnInit(): void {
        this.currentRoute = window.location.href;
        this._productRedirection(this.currentRoute);
}

private _productRedirection(url: string): void {

        this._http.get(
            RequestMapperService.PRODUCT_REDIRECTION_REQIEST,
            {
                params: {
                    slug: encodeURIComponent(url)
                }
            }
        ).subscribe({
                next: () => {},
                error: (err: HttpErrorResponse): void => {
                    window.location.href = err.url!;
                }
            }
        );
}

Issue

This particular element works well in the local development environment. Though I am not sure how good or bad will be the SEO impact. However it doesn't work in the production, and it is throwing CORS error as follows

• The red one is the correct URL (host domain + route params) where the product is currently located
• The green one is the API endpoint along with the slug/URL where the call has been made
• The blue one is host domain of the web app (without route params)

I have also tried adding the host domain (blue marked) as origin in the redirection response.

headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN, <THE_HOST_DOMAIN_OF_THE_WEB_APP>);

But, this time the CORS error is different.

As you can see the host domain has been added twice in the response.

Queries

So, here are my queries

1. Does Angular allows to handle such dynamic URL redirection?
2. If yes, does that can be done without SSR but with SPA?
3. What am I doing wrong here? Am I unaware of something?
4. Is there a better solution to my use case?