I am currently in the process of developing a prototype application that involves making an Ajax GET call using JavaScript on an HTML page. The setup I have in place is as follows:
Operating System: Windows/Apache Web Server (XAMPP) Database: MongoDB Browser: Chrome
All of these components are running on the same Windows7(32) machine. The MongoDB server and data are located in the C:\ path, while the Apache server is in the C:\XAMPP path. I can access the MongoDB server directly through the browser by making a call to:
localhost:28017/ database/ collection
This call returns the collection's data in JSON format without any issues.
However, when I attempt to run the same Ajax call in JavaScript via an HTML page, I encounter the following error message:
XMLHttpRequest cannot load http:// localhost:28017/ database/ collection. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http:// localhost' is therefore not allowed access.
In an effort to resolve this issue, I made modifications and inspected my httpd.conf file where I set the following:
<Directory />
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type,
Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
AllowOverride none
Require all denied
</Directory>
I also verified that the headers_module is being loaded with the directive:
LoadModule headers_module modules/mod_headers.so
Despite these configurations, the workaround was unsuccessful. It seems that the port number differs between the HTML and the Ajax call (80 vs. 28017), resulting in a new domain.
Below is the script code used for the Ajax call:
var xhr = new XMLHttpRequest();
console.log("xhr open")
xhr.open("GET", "http://localhost:28017/ database/ collection/", false);
xhr.send();
Here are the response headers from the HTML call:
Accept-Ranges:bytes
Access-Control-Allow-Headers:X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding
Access-Control-Allow-Methods:POST, GET, OPTIONS, DELETE, PUT
Access-Control-Allow-Origin:*
Access-Control-Max-Age:1000
Connection:Keep-Alive
Content-Length:564
Content-Type:text/html
Date:Mon, 09 Jan 2017 23:47:06 GMT
ETag:"234-545b12ed82b40"
Keep-Alive:timeout=5, max=100
Last-Modified:Mon, 09 Jan 2017 22:49:41 GMT
Server:Apache/2.4.23 (Win32) OpenSSL/1.0.2h PHP/5.5.38
And here are all the headers from the XHR call:
General
Request URL:http://localhost:28017/ database/ collection/
Request Method:GET
Status Code:200 OK
Response Headers
Connection:close
Content-Length:369
Content-Type:text/plain;charset=utf-8
x-action:
x-ns:database.collection
Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:localhost:28017
Origin:http:// localhost
Referer:http://localhost/ load_mongodb_data.html
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
Any help or guidance on resolving this issue would be greatly appreciated.