Refused to get unsafe header "Content-Length"

Question

can anyone help?

I'm newbie here

function getFileSize(url, callback) {
        var request = new XMLHttpRequest();
        //get only header.
        request.open("HEAD", url, true);
        request.onreadystatechange = function() {
            if (this.readyState == this.DONE) {
                callback(parseInt(request.getResponseHeader("Content-Length")));
            }
        };
        request.send();
    }

Refused to get unsafe header "Content-Length"

that line gives me an error >> allback(parseInt(request.getResponseHeader("Content-Length"))); in console

can anyone help?

Solution

Your JavaScript is fine. This is a CORS issue. You can learn more from this answer here.

If you can modify the headers at the source you need to include the Access-Control-Expose-Headers header. You can read more about that here.

Comments

[Admin]

yeah i found that it is CORS issue but i cant understand how to fix it

[arjabbar]

If you can modify the headers coming from the source then add this => developer.mozilla.org/en-US/docs/Web/HTTP/…

[Admin]

actually i cant i get that file from another server that is not mine, its vk music

[arjabbar]

Seems like your last remaining option is to create a proxy between vk music and yourself. So then you would request this info from your own server and your server would then send a request to vk music and extract the headers that you want from there instead. At that point you'd have complete control over the response.

[Admin]

yeah but its kind a slow with proxy

[Llyle]

This is the correct answer and should be accepted. Thank you for your help. Access-Control-Expose-Headers must be set on the server-side to white-list the header in a CORS context so clients can access the header. In my case I was white-listing the Content-Disposition header so that I can get the filename of a file being downloaded. For example: response.Content.Headers.Add("Access-Control-Expose-Headers"‌​, "Content-Disposition");