No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '...' is therefore not allowed access
Use addHeader
Instead of using setHeader
method,
response.addHeader("Access-Control-Allow-Origin", "*");
*
in above line will allow access to all domains
.
For allowing access to specific domain only
:
response.addHeader("Access-Control-Allow-Origin", "http://www.example.com");
Check this blog post
.
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.
For .NET server can configure this in web.config as shown below
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="your_clientside_websiteurl" />
</customHeaders>
</httpProtocol>
</system.webServer>
For instance lets say, if the server domain is http://live.makemypublication.com and client is http://www.makemypublication.com then configure in server's web.config as below
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="http://www.makemypublication.com" />
</customHeaders>
</httpProtocol>
</system.webServer>
If you get this error message from the browser:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access
when you're trying to do an Ajax POST/GET request to a remote server which is out of your control, please forget about this simple fix:
<?php header('Access-Control-Allow-Origin: *'); ?>
What you really need to do, especially if you only use JavaScript to do the Ajax request, is an internal proxy who takes your query and send it through to the remote server.
First in your JavaScript, do an Ajax call to your own server, something like:
$.ajax({
url: yourserver.com/controller/proxy.php,
async:false,
type: "POST",
dataType: "json",
data: data,
success: function (result) {
JSON.parse(result);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr);
}
});
Then, create a simple PHP file called proxy.php to wrap your POST data and append them to the remote URL server as a parameters. I give you an example of how I bypass this problem with the Expedia Hotel search API:
if (isset($_POST)) {
$apiKey = $_POST['apiKey'];
$cid = $_POST['cid'];
$minorRev = 99;
$url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;
echo json_encode(file_get_contents($url));
}
By doing:
echo json_encode(file_get_contents($url));
You are just doing the same query but on the server side and after that, it should works fine.