No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access

Question

I\'m using .htaccess to rewrite urls and I used html base tag in order to make it work.

Now, when I try to make an ajax request I get the following error:

Answer 1

Why the error is raised:

JavaScript code is limited by the same-origin policy, meaning, from a page at www.example.com, you can only make (AJAX) requests to services located at exactly the same domain, in that case, exactly www.example.com (not example.com - without the www - or whatever.example.com).

In your case, your Ajax code is trying to reach a service in http://wordicious.com from a page located at http://www.wordicious.com.

Although very similar, they are not the same domain. And when they are not on the same domain, the request will only be successful if the target's respose contains a Access-Control-Allow-Origin header in it.

As your page/service at http://wordicious.com was never configured to present such header, that error message is shown.

Solution:

As said, the origin (where the page with JavaScript is at) and the target (where the JavaScript is trying to reach) domains must be the exact same.

Your case seems like a typo. Looks like http://wordicious.com and http://www.wordicious.com are actually the same server/domain. So to fix, type the target and the origin equally: make you Ajax code request pages/services to http://www.wordicious.com not http://wordicious.com. (Maybe place the target URL relatively, like '/login.php', without the domain).

On a more general note:

If the problem is not a typo like the one of this question seems to be, the solution would be to add the Access-Control-Allow-Origin to the target domain. To add it, depends, of course, of the server/language behind that address. Sometimes a configuration variable in the tool will do the trick. Other times you'll have to add the headers through code yourself.