CORS issue with cookies in Angular when authenticating with Woocommerce(WordPress) JWT API

I have a WooCommerce (WordPress) setup on Hostinger, and I'm using it in a Headless setup with an Angular frontend. However, I am facing CORS issues when trying to make API requests from Angular to WooCommerce (Talking about Cart and Checkout section). i tried many solutions posted here but they all didn't work !

Setup Details:

Backend (WooCommerce) is hosted on https://example.com.

Frontend (Angular) is currently running locally on http://localhost:4200.

When making requests to WooCommerce REST API from Angular, I get a CORS error.

Error Message:

Access to fetch at 'https://example.com/wp-json/wc/v3/products' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
​

What i tried:

1- Enabled CORS in WooCommerce by adding the following to functions.php:

function add_cors_http_header() {
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE, PUT");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
}
add_action('init', 'add_cors_http_header');


2-Tried adding a .htaccess rule in the root directory:

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, DELETE, PUT"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"
</IfModule>


3- Angular HTTP request includes withCredentials: true :

login(credentials: { username: string; password: string }): Observable<any> {
return this.http.post<LoginResponse>(
`${this.Api_Url}/wp-json/jwt-auth/v1/token`,
credentials,
{
withCredentials: true,
observe: 'response',
headers: { "Content-Type": "application/json" }
}
).pipe(
tap(response => {
console.log('Cookies from response:', response.headers.get('Set-Cookie'));
}),
catchError(error => {
console.error('Login failed:', error);
return throwError(() => error);
})
);
}


4- tried proxy.conf.json :

{
"/api": {
"target": "https://example.com",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}

• Checked browser network requests and saw that the Set-Cookie header is missing in the response.
• API works fine in Postman, but when calling from Angular, no cookies are set.

Possible Solution I'm Considering:

Would it be a good idea to host Angular on the same Hostinger server as WooCommerce, so both frontend and backend share the same test domain (e.g., https://example.com) and i will write the (Cart logic and deploy it many times "test domain")?

If yes, what’s the best way to deploy Angular on Hostinger?

Continue reading...