1

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.com.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.com.br/' from origin 'https://wordpress-host.com.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.com/ 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.

4
  • Did you enable CORS on the resource (the xyz.com.br site)?
    – Sally CJ
    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
    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.com.br/ with https://www.mocky.io/v2/5e7ed796300000da134afba0 - does it work? What's in the console?
    – Sally CJ
    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
    Apr 3, 2020 at 12:28

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.