[SOLVED] Refused to set unsafe header Connection in Safari

[mark_nsx]

Hi guys. I've implemented a simple AJAX request object which works fine in most browsers apart from Safari. The js error console returned this error "Refused to set unsafe header Connection".

Here's the code snippet:

function createRequestObject() {
	var xhr;
	try {
		xhr = new XMLHttpRequest();
	}
	catch (e) {
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xhr;
}

function send() {
	if(!stopped) {
		xhr.open('post', url, true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr.onreadystatechange = function() { self.onComplete(); };
		xhr.send(parameters);
	}
}

Does anybody know the fix for this? Cheers!

[xtopolis]

You didn't send the Content-Length header.

[mark_nsx]

I tried setting the Content-Length header and it returned the error "Refused to set unsafe header Content-Length".

[xtopolis]

did you set the correct length of parameters.length?

[mark_nsx]

I did set the content length by calling this line;

xhr.setRequestHeader('Content-Length', parameters.length);

and its still throwing this error in Safari 3 "Refused to set unsafe header Content-Length".

[mark_nsx]

Solved! For some reason the asynchronous variable in the open() call must be set to false for it to work in Safari, true in other browsers.

[corbin]

I doubt that was the true problem.  That probably just happened to fix it.

 

 

What was the url value?

[mark_nsx]

it's a local cakephp URL.

[corbin]

Hrmmm wonder why it doesn't like you setting the content length header....  Have you tried it when not setting the content-length header?

[mark_nsx]

Yes I have and it gave me a Refused to set unsafe header Connection..

[corbin]

What's your full AJAX-related code?

[mark_nsx]

/*********
* Javascript for file upload demo
* Copyright (C) Tomas Larsson 2006
* http://tomas.epineer.se/

* Licence:
* The contents of this file are subject to the Mozilla Public
* License Version 1.1 (the "License"); you may not use this file
* except in compliance with the License. You may obtain a copy of
* the License at http://www.mozilla.org/MPL/
* 
* Software distributed under this License is distributed on an "AS
* IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
* implied. See the License for the specific language governing
* rights and limitations under the License.
*/
function PeriodicalAjax(url, parameters, frequency, decay, onSuccess, onFailure) {
function createRequestObject() {
	var xhr;
	try {
		xhr = new XMLHttpRequest();
	}
	catch (e) {
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xhr;
}

function send() {
	if(!stopped) {
		var async = true;
		var browserName = navigator.userAgent.toLowerCase();
		if (browserName.indexOf('safari/') != -1){
			async = false;
		}
		xhr.open('post', url, async);
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		xhr.onreadystatechange = function() { self.onComplete(); };
		xhr.send(parameters);
	}
}

this.stop = function() {
	stopped = true;
	clearTimeout(this.timer);
}

this.start = function() {
	stopped = false;
	this.onTimerEvent();
}

this.onComplete = function() {
	if(this.stopped) return false;
	if ( xhr.readyState == 4) {
		if(xhr.status == 200) {
			if(xhr.responseText == lastResponse) {
				decay = decay * originalDecay;
			} else {
				decay = 1;
			}
			lastResponse = xhr.responseText;
			if(onSuccess instanceof Function) {
				onSuccess(xhr);
			}
			this.timer = setTimeout(function() { self.onTimerEvent(); }, decay * frequency * 1000);
		} else {
			if(onFailure instanceof Function) {
				onFailure(xhr);
			}
		}
	}
}

this.getResponse = function() {
	if(xhr.responseText) {
		return xhr.responseText;
	}
}

this.onTimerEvent = function() {
	send();
}

var self = this;
var stopped = false;
var originalDecay = decay || 1.2;
decay = originalDecay;
var xhr = createRequestObject();
var lastResponse = "";
this.start();
}

function ProgressTracker(sid, options) {

this.onSuccess = function(xhr) {
	if(parseInt(xhr.responseText) >= 100) {
		periodicalAjax.stop();
		if(options.onComplete instanceof Function) {
			options.onComplete();
		}
	} else if(xhr.responseText && xhr.responseText != lastResponse) {
		if(options.onProgressChange instanceof Function) {
			options.onProgressChange(xhr.responseText);
		}
		if(options.progressBar && options.progressBar.style) {
			options.progressBar.style.width = parseInt(xhr.responseText) + "%";
			$('numeric').innerHTML = parseInt(xhr.responseText) + "%";
		}
	}
}

this.onFailure = function(xhr) {
	if(options.onFailure instanceof Function) {
		options.onFailure(xhr.responseText);
	} else {
		alert(xhr.responseText);
	}
	periodicalAjax.stop();
}

var self = this;
var lastResponse = -1;
options = options || {};
var url = options.url || '/videos/progress';
var frequency = options.frequency || 0.5;
var decay = options.decay || 2;
var periodicalAjax = new PeriodicalAjax(url, 'sid=' + sid, frequency, decay, function(request){self.onSuccess(request);},function(request){self.onFailure(request);});
}

function beginUpload(sid) {
      document.postform.submit();
    	var pb = document.getElementById("progress");
    	pb.parentNode.parentNode.style.display='block';
    	new ProgressTracker(sid,{
    		progressBar: pb,
    		onFailure: function(msg) {
    			Element.hide(pb.parentNode);
    			alert(msg);
    		}
    	});
}

[corbin]

That's strange... I don't see why it would error.  (Semi-glanced through it.)

 

 

Disabling the asynch param of the AJAX call almost defeats the point of AJAX in some situations though.  (As long as load times are slow it's not noticable.)

[mark_nsx]

It's not noticeable in my application's case since it just updates the progress bar while the user is uploading a video.

Thanks for all the help!