How to does the token prevent csrf attack?

The attacker can’t use JavaScript to read the token from the site, because it would be a cross-origin request and access to the data from it is blocked (by default) by the Same Origin Policy (MDN, W3C).

Take this for example:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://google.com");
xhr.addEventListener('load', function (ev) {
    console.log(this.responseText);  
});
xhr.send();

The JS console reports:

XMLHttpRequest cannot load http://google.com/. No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.