call of javascript function to external url always blocked by cors
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.
Leave an answer