Igor Lacik Igor Lacik - 2 years ago 320
Javascript Question

XAMPP: JQuery Ajax - Access-Control-Origin error

I am trying to use JQuery ajax in order to retrieve data from a source on a different domain.

I am getting a No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

E.g. I would like to retrieve the whole DOM of e.g. stack overflow main page.

$(document).ready(function() {
url: "http://stackoverflow.com/",
success: function(data) {
$("h1").text("Success => check console");
error: function(data) {
$("h1").text("Error => check console");

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>



What I tried:

  • I was running this on my Apache server (XAMPP). Found out I need to set .htaccess needs to Header add Access-Control-Allow-Origin "*" (for security reasons the Kleene star should be replaced with the required URI). I was playing a lot with different .htaccess

  • So now I am trying to retrieve it without a server on the backend, purely with the code I provided in the snippet (running it from file:///C:/)


I am adding a bounty to this question. I will give the bounty to the answer that will explain how to make this run under XAMPP - resulting in me being able to do it. Throughout Stack Overflow, this is a question that was not yet explained clearly enough.

Thank you

Footnote: This example is just to illustrate the problem. In the final solution, I just want to use the AJAX to send REST requests to another PC in our VLAN where a server is running.

Answer Source


  • If I host an API I need to allow cross-origin requests.
  • If I want to access an API, the server hosting the API needs to allow cross-origin requests.
  • The code was not a problem, nor was me running it from file://, the snippet works fine

Longer explanation in laymans terms:

  • When hosting a server were you want to host an API, you need to allow Access Control Allow Origin headers on the server. You can specify which servers are allowed to access the API.

    If I am running an APACHE server and I want to serve some data on REST requests, I need to specify clients that are allowed to access the services I provide. This is done in .htaccess by adding:

    Header add Access-Control-Allow-Origin *

    To be more secure, its possible to just allow specific origins:

    Header set Access-Control-Allow-Origin http://www.specific_origin.com

  • On the other hand, if another server hosts API on their domain, the admin of the server needs to allow the origins they accept requests from (this was my case). For example, the server containing the API was written in python, so the code is the following:

    self.set_header('Access-Control-Allow-Origin', '*')

  • Once this was set, even a request from a script in the provided snippet works well just from accessing a "file" address e.g. file:///C:/tasks/crawler/index.html

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download