Cors error between two plesk application Nodejs - Angular

I have an plesk server on x.x.x.x and this ip has 2 different application domain; client.plesk.page and api.plesk.page.

When i want to access my api on client server it gives CORS error :

Access to XMLHttpRequest at 'https://api.plesk.page' from origin 'https://client.plesk.page' 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.

This is network info on browser after i POST api.plesk.page

Request URL:

https://api.plesk.page

Request Method:

OPTIONS

Status Code:

428

Remote Address:

x.x.x.x(server ip):443

Referrer Policy:

strict-origin-when-cross-origin

but when i curl it like this :

 curl -i -X OPTIONS -H "Origin: https://client.plesk.page/" \             
    -H 'Access-Control-Request-Method: POST' \
    -H 'Access-Control-Request-Headers: Content-Type, Authorization' \
    "api.plesk.page/"

it gives this response :

HTTP/2 204 
server: nginx
date: Sat, 19 Aug 2023 13:43:27 GMT
x-powered-by: Express, Phusion Passenger(R) 6.0.13
access-control-allow-headers: Content-Type, Authorization
access-control-allow-origin: *
access-control-allow-methods: GET,HEAD,PUT,PATCH,POST,DELETE
vary: Access-Control-Request-Headers
status: 204 No Content
x-powered-by: PleskLin
access-control-allow-origin: *
access-control-allow-methods: *
access-control-allow-headers: *

I've tried to allow all urls with all CORS settings and added headers. But no one works.

I want to access my "/login" path with POST request but CORS not allow me.

I used on api app.use(cors()); and on plesk NGINX directives:

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' '*';
add_header 'Access-Control-Allow-Headers' '*';

What can i try to know what is my problem? and How can i solve this issue?

This is Auth Service on Angular client :

export class AuthService {
  constructor(private http: HttpClient) {}
  login(params, callback) {
    const headers = new HttpHeaders({
      'Access-Control-Allow-Origin': '*',
      'Content-Type': 'application/json',
    });

    this.http
      .post<any>(environment.BASE_URL + '/login', params, {
        headers,
      })
      .subscribe(
        (response) => {
          const result = JSON.parse(response);
          console.log(response);
          callback(result, null);
        },
        (err) => {
          console.log(err);
          callback(err);
        }
      );
  }
}

And login component.ts

export class LoginComponent implements OnInit {
  returnUrl: any;

  constructor(
    private toastr: ToastrService,
    private router: Router,
    private route: ActivatedRoute,
    private authService: AuthService
  ) {}
  username;
  password;
  ngOnInit(): void {
    // get return url from route parameters or default to '/'
    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
  }

  onLoggedin(e: Event) {
    e.preventDefault();
    // debugger
    let body = {
      email: this.username,
      password: this.password,
    };
    this.authService.login(body, (result) => {
      if (result?.error) {
        this.toastr.error(result?.message);
        console.log(result?.error);
        // This logs "0 Unknown Error"
      } else {
        localStorage.setItem('token', result.token);
        this.router.navigate([this.returnUrl]);
      }
    });
  }
}

It was IP issue. I deployed my api on plesk test domains. Every thing was perfect except plesk not allow me to access my api.

I changed the domain and every thing is working now.