Greetings to all
I am new to AJAX and I had a problem with the same security policy using jQuery 1.4.4 and jquery. form.js AJAX.
I have an AJAX contact form that works great as long as the URL of the visitor to which they are typing is "www". But if they go to my site (without using www), the URL still resolves OK, but the URL does not match what I use in my AJAX form. In Chrome, this results in a console error:
"XMLHttpRequest cannot load http://www.example.com/ . Origin http://example.com is not allowed by Access-Control-Allow-Origin."
And on IE8 I get Access Denied. Therefore, even if the URL permits OK with or without www, my AJAX form will not work unless the visitor has the foreword www. If I changed the code of the AJAX form to send the message http://example.com (without "www"), it will not work if visitors go to www. example.com. I can’t figure out how to make my code either conditional. This should be a problem that almost everyone has encountered using AJAX, regardless of the use of jQuery. So I have to miss something obvious. Can someone please enlighten me on this? My test code is below.
Thank,
Northk
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajaxForm Error Test</title>
<script src="http://www.example.com/js/jquery-1.4.4.min.js"></script>
<script src="http://www.example.com/js/jquery.form.js"></script>
</head>
<body>
<form id="contact-form" method="post" action="http://this-url-wont-be-used.com/">
<a href="#" id="contact-button">SEND</a>
</form>
<script>
$('#contact-form').ajaxForm({
url: 'http://www.example.com/',
success: function(data) {
alert(data);
},
dataType: 'html'
});
$('#contact-button').click(function(e) {
$('#contact-form').submit();
});
</script>
</body>
</html>
source
share