-2

The following lines of code in a JS function, were working perfectly well. However, the send() method, suddenly produced the error below, and can't link in to my localhost DB ...

  xhttp.open("GET", "connect_db.php?q="+str, true);
  xhttp.send();

The error from console log, in full, is:

Access to XMLHttpRequest at 'file:///Users/liamjf/.bitnami/stackman/machines/xampp/volumes/root/htdocs/selectQuery.php?q=eu' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

GileBrt
  • 1,830
  • 3
  • 20
  • 28
fitzy
  • 9
  • 3
  • Your server (which in this case is your computer's filesystem) doesn't support CORS. Try using a server that does support CORS (or which wouldn't require it) – Kevin B Mar 12 '19 at 20:47

1 Answers1

-1

CORS policies can be problematic when testing on a localhost with some browsers. One easy way to deal with this is to add a domain name to your hosts file pointing to localhost, then reference the site via the domain name instead of localhost. Then the request should be automatically allowed by same-origin policy.

Otherwise you will need add 

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: "GET, PUT, POST, DELETE, HEAD, OPTIONS"

to your HTTP headers on your local webserver and even then it may not work in all browsers.

CodyTheCoder
  • 74
  • 7
  • 1
    In this case, according to the error message, the source of this ajax request is a file on the user's local filesystem, to another file on the same filesystem. It isn't possible to have the filesystem, which is acting as the server in this case, return proper cors headers. – Kevin B Mar 12 '19 at 20:51
  • The only file I can find, to do this is in, is in 'Apache2' folder, which came with the XAMPP download i.e. 'httpd.conf'. It won't allow me to save the changes however to this configuration file. As you know, this is a simulated server system, for testing DB designs, with website calls ( AJAX & PHP etc. ), all on one P.C. I'm confused, as it worked perfectly well, i.e. fetched data, and updated a table element on the web page, using a parsed variable, before, with same browser and files, code etc. – fitzy Mar 14 '19 at 10:03
  • The reason that this it was working before is that same-origin policies allow AJAX requests to the same hostname. But if you run a website on your localhost then all of your relative Hyperlinks and AJAX requests will route to file:///Users/... by default. Local file requests are blocked by most browser's CORS policies. But as I said earlier, if you edit your systems 'hosts file' to include some random name like 'mysite.me' pointing to 127.0.0.1 and you have a running webserver, then your browser will understand this as a normal site and not a local filesystem request. – CodyTheCoder Mar 14 '19 at 16:03
  • 1
    What Kevin B said is true if you are accessing your site files directly. If you are doing this then you may be bypassing your webserver. My suggestions will work if you are accessing your site via port 80 by typing 127.0.0.1 or your custom 'hosts file' hostname into your browser. (also you have to make sure that your apache virtual host is configured correctly in order to serve the correct site when requested) This will trigger an actual HTTP request to be sent to the application listening on port 80 (Apache) on your local machine. Without this, you can't send CORS headers to the browser. – CodyTheCoder Mar 14 '19 at 16:13
  • It "SENT" fine, and returned and output the correct data to a table. When I open the ( one and only ) 'index.html' file in the 'htdocs' folder, ( where it has to be, to work with the localhost server ), it opens the file with the following filepath "file:///Users/liamjf/.bitnami/stackman/machines/xampp/volumes/root/htdocs/index.html", by typing in, "localhost/index.html" it should open the same file, but it doesn't, as these file-paths are interchangeable, according to the configuration. So, in short, the 'localhost' filepath, is not going ( by default as it should ) to 'htdocs' folder. – fitzy Mar 15 '19 at 20:57
  • If localhost/index.html is not resolving to the correct path then that is an Apache2/XAMPP configuration question. You will need to fix this first, not only for the CORS issue but also because connect_db.php will need to invoke the PHP interpreter but that cant happen unless you are requesting it through the Apache service. Opening a PHP file directly through your file system will fail because of this. The only reason that the other stuff loaded is because index.html is a static file that can be loaded directly. – CodyTheCoder Mar 19 '19 at 15:03