Question

I have a global js file which has an ajax script. which is included in each page header.

<script src="http://www.mydomain.com/js/global.js" type="text/javascript"></script>

Then in global.js, the ajax script is:

$('#send_ajax').click(function(){
   $.ajax({
      type: 'post',
      url: 'http://www.mydomain.com/ajax-process',
      data: data + '=' + encodeURI(data),
      success: function(data){
          $('#result').html();
      }
   });
});

But now I’ve got some stange problem. If someone opens my page like: http://www.mydomain.com/somepage, the script could run well, but someone open my page like http://mydomain.com, it would show http://www.mydomain.com/ajax-process. Origin http://mydomain.com is not allowed by Access-Control-Allow-Origin.

Why these are all my site, with www and without www would meet this problem? how to solve it?

Answer 1

The single origin policy says that you can only make an Ajax call to the server that the page is from (where the script is loaded from doesn’t actually matter)

All of the protocol (http or https), domain name and port must match exactly for the request to be allowed. No exceptions are made along the lines of http://www.example.com is the same as example.com.

In your case there are 3 things you could do, in roughy order of appropriateness:

• don’t use absolute urls – if you make your Ajax request to just ‘/ajax-process’. This will make the request to the server the page came from
• use redirects so that people can only access http://www.example.com
• implement cross domain access control: this involves sending http headers that describe which domains are allowed to make http requests to your app. This is almost certainly overkill for you.