I have an JQuery ajax request which throws me an error:

Access to XMLHttpRequest at 'http://localhost:8080/api/v1/2523/export-pdf' from origin 'http://xxxxx.localhost' 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.

But I am pretty sure I have Access-Control-Allow-Origin: * set properly. This is the request object, where as you can see Access-Control-Allow-Origin header.

Accept: */*
Access-Control-Allow-Origin: *
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://xxxxxx.localhost/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="102", "Google Chrome";v="102"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
User-Agent: Mozilla/5.0 ...

This is the js code:

var data = {
    lang: lang,
    client: company,
    campaign_name: campaign_name,
    crm_token: {$api_token},
};

var url = {$api_url} + campaign_id + '/export-pdf';

$.ajax(url, {
    headers: {
        'Access-Control-Allow-Origin': '*'
    },
    type: 'POST',
    data: data,
    dataType: 'application/pdf',
    crossDomain: true,
    
    success: function(data) {
        console.log('result data');
        console.log(data);
        var downloadUrl = window.URL.createObjectURL(new Blob([data]));
        var link = document.createElement('a');
        link.href = downloadUrl;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        link.remove();

    error: function (data) {
                    form.find('#pdfExportFormErrors').removeClass('d-none').html('PDF download error.');
});

What am I doing wrong? Please help. Thanks.