I created a javascript function that have to be called every time someone clicks a button. This is the code present on file /wp-includes/js/utm.js:

function event_click() {
    document.getElementById("cf_submit-site-aa7bccxxxx").addEventListener("click", prepareData2DB);
    console.log("ready");
}

function prepareData2DB() {
        // prepare body to send request 
        visitant = ...;
        send2DB(visitant);
    }
}

function send2DB(visitant) {
    var xmlHttp = new XMLHttpRequest();

    xmlHttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log('response:' + this.response);
        }
    };

    xmlHttp.open("POST", "/", true);
    xmlHttp.setRequestHeader('Content-type', 'application/json');
    xmlHttp.setRequestHeader('Access-Control-Allow-Origin', '*');
    xmlHttp.setRequestHeader('Access-Control-Allow-Methods', 'POST');
    xmlHttp.setRequestHeader('Access-Control-Allow-Headers', 'Content-Type');
    xmlHttp.send(JSON.stringify(visitant));
}

This file is imported on footer.php:

<script type='text/javascript' src="/wp-includes/js/utm.js"></script>

When the button is clicked and the function triggered, I got this error on console:

Access to XMLHttpRequest at '/' from origin '' 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 already added this code on functions.php:

function add_cors_http_header(){
    header("Access-Control-Allow-Origin: *");
}
add_action('init','add_cors_http_header');

And using both / and / on call with the xyz url, I got:

net::ERR_CONNECTION_CLOSED

Last, I used this plugin, but neither worked.

I don't know what else I can do to transpass this error.

I created a javascript function that have to be called every time someone clicks a button. This is the code present on file /wp-includes/js/utm.js:

function event_click() {
    document.getElementById("cf_submit-site-aa7bccxxxx").addEventListener("click", prepareData2DB);
    console.log("ready");
}

function prepareData2DB() {
        // prepare body to send request 
        visitant = ...;
        send2DB(visitant);
    }
}

function send2DB(visitant) {
    var xmlHttp = new XMLHttpRequest();

    xmlHttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log('response:' + this.response);
        }
    };

    xmlHttp.open("POST", "https://xyz.br/", true);
    xmlHttp.setRequestHeader('Content-type', 'application/json');
    xmlHttp.setRequestHeader('Access-Control-Allow-Origin', '*');
    xmlHttp.setRequestHeader('Access-Control-Allow-Methods', 'POST');
    xmlHttp.setRequestHeader('Access-Control-Allow-Headers', 'Content-Type');
    xmlHttp.send(JSON.stringify(visitant));
}

This file is imported on footer.php:

<script type='text/javascript' src="/wp-includes/js/utm.js"></script>

When the button is clicked and the function triggered, I got this error on console:

Access to XMLHttpRequest at 'https://xyz.br/' from origin 'https://wordpress-host.br' 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 already added this code on functions.php:

function add_cors_http_header(){
    header("Access-Control-Allow-Origin: *");
}
add_action('init','add_cors_http_header');

And using both https://corsproxy.github.io/ and https://cors-anywhere.herokuapp/ on call with the xyz url, I got:

net::ERR_CONNECTION_CLOSED

Last, I used this plugin, but neither worked.

I don't know what else I can do to transpass this error.

• functions
• javascript

• Did you enable CORS on the resource (the xyz.br site)? – Sally CJ Commented Mar 27, 2020 at 16:13
• @SallyCJ, I didnt enabled, however, I tried to call a mocky.io url and got the same error. I think that is something on wordpress site – mhery Commented Mar 27, 2020 at 16:23
• Sorry (about my previous comment, which I've deleted), I wasn't aware mocky.io is not a CORS proxy. But if you still get the CORS error with mocky.io, then the issue is with your browser and not WordPress. I mean, inside your send2DB(), try replacing the https://xyz.br/ with https://www.mocky.io/v2/5e7ed796300000da134afba0 - does it work? What's in the console? – Sally CJ Commented Mar 28, 2020 at 5:06
• 1 @SallyCJ, thanks for your response. actually, it worked with your mocky.io. this helped me to better investigate what happened. – mhery Commented Apr 3, 2020 at 12:28

1 Answer 1

I put cors header on functions.php, allow cors on API, ensure https on both sides and allow cors on digital ocean – that hosts both wordpress and API