3

I'm trying something really simple but for some reason it doesn't work :

index.html :

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>SyriLab</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header></header>
    <div id="content"></div>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/poper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/functions.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

js/main.js :

window.onload=function(){
    main();
}


function main(){
    $("header").load("./pages/header.html"); 
    $("#content").load("./pages/home.html");
}

Errors I get when I launch index.html :

Failed to load file:///E:/Dev/Eclipse/SyriLab/pages/header.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Failed to load file:///E:/Dev/Eclipse/SyriLab/pages/home.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Everything is local, same root, I'm just trying to make a basic html page, including bootstrap and jquery (poper too, not sure what it is but was on the bootstrap page). And using something similar to "include" in php, but with regular js and html.

What am I doing wrong here ?

NeS
  • 147
  • 1
  • 2
  • 10
  • 1
    The error tells you... Hint your protocol is `file`... Install mongoose. It's a light weight web server for windows and create a host entire that points a made up domain to local Host. – Darkrum Apr 11 '18 at 04:33
  • 1
    Is there no other way ? I wanted to be able to experiment without having to run anything. – NeS Apr 11 '18 at 04:37
  • this is a really bad practice to load external html like this. – Wils Apr 11 '18 at 04:39
  • No I'm lying to you. Go install mongoose... It's dead simple. – Darkrum Apr 11 '18 at 04:41
  • Wils : how should I do then ? Darkrum : ok thanks, I just wanted not having to install or run anything, and just launching my page. But If there's no other choice – NeS Apr 11 '18 at 04:41
  • @NeS wils doesn't know what he's talking about. – Darkrum Apr 11 '18 at 04:47
  • Possible duplicate of [AJAX request to local file system not working in Chrome?](https://stackoverflow.com/questions/38344612/ajax-request-to-local-file-system-not-working-in-chrome) – SilverSurfer Apr 11 '18 at 08:45
  • @NeS It can be possible, use Firefox and check my duplicate suggestion link. – SilverSurfer Apr 11 '18 at 08:47
  • @Darkrum "mongoose... It's dead simple" maybe, but it is NOT obvious how to do this if someone is not aware about solution. I went through https://github.com/cesanta/mongoose and their docs and I still have no idea how to serve simple html so that it can run simple.js! – reducing activity Apr 01 '21 at 15:46

2 Answers2

2

Based on your question, it seems you are trying to access the index.html as a local file. Instead of that, you must use webserver (e.g. nginx, apache etc) to access the file. The jQuery's load method will not be able to load the file due to the protocol used for accessing local file is file://. Such requests are prohibited by the browsers due to security reasons.

Configure a webserver and try to access the index.html using http protocol and your code should work.

CuriousMind
  • 3,143
  • 3
  • 29
  • 54
2

As others has stated. You must serve your files using a server.

For that purpose and to avoid software installation use Python.

In your console type:

cd /path/to/my/index.html
// Below is command line for Python 3.x
python -m http.server
// Below is command line for Python 2.x
python -m SimpleHTTPServer

By default it will use http://localhost:8000/

This simple server will serve your directory files. Index.html is the empty resource request that the server will try to find and serve.

Charlie
  • 101
  • 2
  • 16
  • It results in `/usr/bin/python: No module named http` and `pip install http` gives `ERROR: Could not find a version that satisfies the requirement http ERROR: No matching distribution found for http` and earlier `ModuleNotFoundError: No module named 'request'`. Not sure is problem caused by outdated answer or I did something weird with `pip` – reducing activity Apr 01 '21 at 15:35
  • @reducingactivity quick a late reply. If you are using Python 2.x you have to invoke python -m SimpleHTTPServer will update answer for future reference – Charlie Oct 15 '21 at 20:30