Develop Reference

Difference between Localhost and opening html file

What is the fundamental difference running a file using a server in localhost, and opening a file such as file:///Users/$user_name/$your_directory/index.html, assuming no backend is used, and it is only frontend and contains html/css/js
How does this also affect interactions with other server ie. ajax requests?
I am sorry if this is too broad, but I haven't found a solid answer to these underlying questions.

Fundamentally, assuming at some point you're going to host the result on an actual web server, the former matches the target environment while the latter doesn't. Browsers treat local files and files served from web servers (even localhost web servers) differently, although very similarly. One aspect of this is the encoding: When you retrieve a file from a web server, the process of determine what encoding the data is in is different from opening a local file.
How does this also affect interactions with other server ie. ajax requests?
This is one of the primary ways in which they're handled differently, and it even varies from browser to browser. A page loaded from a file:// URL has origin null from a Same Origin Policy standpoint. Some browsers (like Chrome) disallow Cross-Origin Resource Sharing entirely for origin null, even when the server you're trying to talk to has a wide-open CORS policy (*). Others (like Firefox) allow origin null to match the wildcard.
In general, for best results, ensure that your development environment matches your deployment environment in the important ways. That means doing your development using a web server process rather than local files. Most IDEs will happily provide that process for you; if not, Apache or Nginx aren't hard to install.

answer is simple,
if u don't have made active backend yet for "index.html" then it would not effect.e.g.-"localhost" and "index.html" will be same this time.
but when u start working with the backend,then most of the backend processes need an active server (need localhost).
e.g.-
1.
fetch('local.json')... //fetch json or any file would not work for local files.
2.
u may not ineract with mysql/django etc. databases.
means it cause errors in signup/login , store any image/video/docs at database etc.
so better is work in localhost, it's most easy way is :-
VScode(IDE) >> extenctions >> live server (just need to click a button to make
localhost and click again to stop localhost)
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

It won't make any difference, I think.
But there is an exception when using Chrome! Sometimes I have seen if a html file is added with some CDN link, then it doesn't loaded into html specifically in Chrome but if you try the same file in Firefox or Internet Explorer, it works.
I have faced this problem and hence I always put it under local IIS default website.

Can a file served by http (localhost or remote) be accessed from a local file opened through file:// protocol? And vice versa? How to implement this?

I've got several html files (TiddlyWiki Classic instances) which are stored on a USB-stick (and for it to remain removable, I open them through the file:// protocol). I use Ajax (via SharedTiddlersPlugin, but that's not that improtant) to load contents of some of them into others of them and that works nicely.
I've also set up several TWs using localhost (WAMP # Windows 10 and a simple saving server called MicroTiddlyServer, the latest version can be found here). But "including" (via Ajax request) from localhost to file and from file to localhost does't work.
So, the question is which ways of including (loading content of an html using JavaScript) is possible:
from file to localhost? Meaning that I open a TW at localhost and get contents of a file on my USB-stick (looks like a big security issue, so it's more likely that this is forbidden, at least using Ajax, but may be there's some workaround),
from localhost to file? (my guess is it's possible via CORS, but adding Header set Access-Control-Allow-Origin "*" to <Directory ...> of Apache's httpd.conf prevents my server (WAMP pack # Windows 10) from working and putting .htaccess file with the Header set Access-Control-Allow-Origin "*" content into the TW directory causes Internal Server Error \n The server encountered an internal error or misconfiguration and was unable to complete your request.)
from remote server to file? (I guess this shouldn't differ much from 2. aside that I usually can't configure the server as I'm not an admin; but as I'd like to use TW as an RSS aggregator, let me include this here, too; this also would help including from and TWs on my smartphone which can be served from there using a PHP server; including to TWs on the smartphone requires localhost->remote server, though, which seems forbidden, too)
I really need some working examples (not necessarily with TW, just with html files) as I'm kinda lost in all those CORS questions and tutorials (the latter being about http, not file protocol). Actually, any working solution (not necessarily via Ajax) will do if:
my USB-stick remains removable at any time except for saving moment
the server-side part can be done at Android as well (PHP is good, Python should do as well, although I haven't tested it yet) and server config is described clearly (well, this happened to be not clear enough in my case)
including remains async
In fact, there's quite a number of ways described for servers, but working with file:// is somewhat different (there's no server to configure!).
The main goal of this question is to understand whether I have to create a server which will serve TWs on USB-stick once it's inserted or I can achieve all 3 goals in a "mostly client-side" way (opening TWs through file protocol). But also I hope that working examples will be helpful for others since this topic seems somewhat poorly documented.

For evident security reason this behaviour is not allowed.
from file to localhost? Meaning that I open a TW at localhost and get contents of a file on my USB-stick (looks like a big security issue, so it's more likely that this is forbidden, at least using Ajax, but may be there's some workaround),
It is not allowed as you cannot use Access-Control-Allow-Origin in an html meta tag.
from localhost to file?
from remote server to file?
Actually, that's the same, there's a web-server, so it's the same mechanism. And as no server will respond with the Access-Control-Allow-Origin header, you cannot access file:// url.
yes accessing file from a server is surely a security issue, but why accessing a server from a file-served html is an issue?
If you could do that, you could send your entire hard drive anywhere on the web just by double clicking on a file.html in your file explorer...
The only way to access your content is to serve it, sorry.

Why Would Javascript Programming Work on One Server but Not Another

Someone else created a Javascript multipage form that works fine on a Host Gator server.
However, on the client's own Windows IIS server with an HTTPS path, it no longer works. It is not loading the Javascript.
Can anyone shed light on this? Is it an issue with Javascript version? Could it be a path issue or a case issue?

If you open your JavaScript console (F12, console tab), you'll see that Validator is not defined and is causing an error.
Above it, you'll also see that your JavaScript files are getting blocked for being served over http:// protocol instead of https:// (causing the scripts to not execute).
To solve that, you might need to host the files on your own server, or to use alternative CDNs (you can just add https to the jQuery URL, but it won't work for gen_validatorv4.js).

This was solved by placing the Jquery and Javascript files on the client server and referencing them with an absolute HTTPS path in the header.php file.

Script tag is loading from file:/// instead of http://

I am working with a simple HTML test page. I am opening it with Chrome version 40.0.2214.115. In order to test the code, I am loading a js file from my workplace.
However, the file which I loaded tries to load other js files through script tags, but does not specify http:// . This causes an error in the console, as it defaults to the file:/// protocol and is unable to load file://the/restof/theurl.js
I downloaded the file locally, and loaded it from there, adding http:// to all url's, so it would ACTUALLY use the HTTP protocol.
This worked fine. However, those links load OTHER files that also do not specify http://
Is there any way I can have the browser imply http:// to unspecified script tags, and avoid downloading and editing EVERY file just to test a small HTML page?

I think the easiest way to prevent problems like this is to actually use a very small server (like something provided by node.js or the like or lighttpd).
Obviously your files are not supposed to be delivered via the plain file protocol, so you should just use a http server. That way you can be sure they work as intended and you don't have to fiddle around with your browser on a deeper level.

If you launch chrome with the below flags this should work. Obviously not possible for production environments, but for testing it should be okay.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

Consider using a simple local file server. If you are unsure how to, since you are developing in JavaScript, you can easily create a simple file server using Node.js which written in JS using simple middleware like node-static.

Opera: .js file won't load

I have a page that calls a script in the header, like so:
<script type="text/javascript" src="http://www.discoverfire.net/analytics/l/a.js"></script>
(Note you will NOT be able to load this script as it is DNSd locally as a staging domain)
Very Simple.
Firefox, IE, Chrome all have no problem with this basic, square-one feature.
Opera, however, refuses to load the script. Any variables or functions in it are "undefined" and in dragonfly, the script tag is shown in the DOM, but the "Script" tab says "No script files found."
I go to google and find random pages, their external .js files seem to work just fine.
Any idea why Opera hates me? Is there a security/javascript thing I am missing?
A few things that may be relevant, but really should make no difference:
The script is on a different domain than the page.
The script is only available on my local network. The domain is DNS'd locally for staging, from outside the network it points somewhere else. Does Opera have a setting to secretly use an external DNS server?
The script works on every other browser I have.
The problem isn't in the script content. I've reduced it to a single line with an alert and it simply won't work in Opera.
Update:
OK, the problem seems to be how Opera treats the domain.
I have moved the script to several other domains, and it DOES work just fine. I've moved it to several paths on the locally DNS'd domain, and it won't work from anywhere on that domain.
This leads me to believe that the problem is that Opera can't, or won't, load the script from this domain for some reason.
Strangely, there seems to be no problem loading pages and other resources from the domain, the problem lies in .js files only.
The domain is registered, but parked. We DNS'd it locally so we can use it for staging/testing, and that may be messing with Opera somehow with JS security.
I could be wrong though - I really have no idea. If anyone else has one, I'd love to hear it.
Update 2:
Regarding Dragonfly and the error console/developer tools, they don't say anything about the script at all. There are plenty of Undefined Variable errors for variables and functions that should be present from the script, but other than that, no errors. Oddly, the script tag does show up in the DOMM, but if I click on the Scripts tab, it says "No Scripts Found".
Update 3:
There is no blocked content, so we can at least rule out that setting.

You may want to see if its ad blocker is getting in the way. Your URL contains the text "analytics," which may be part of a "block this" pattern. I know some block Google analytics through Opera. An easy test for this may be to try moving your .js to a different path on the host.

Have you checked Opera's error console? Tools > Advanced > Error Console
It should provide information on why it won't load or if there another error of some kind.

Like Jacob suggested, you should check if it isn't blocked. To do this:
Right-click on your page
Select "Block Content..." in the context menu
At the top of the screen, click the "Details..." button
You should see the URL's that are blocked on the current page

You should ask in the Opera Forums. I had some problems with Opera in the past and they answered quickly.

Is the host serving the correct mime type of the JavaScript file. It's not a commonly known fact but the type=text/javascript attribute is actually ignored by browsers as it trusts that the server is specifying the correct type.
Additionally the mime type of text/javascript is actually wrong when it comes to JavaScript, the actual JavaScript mime type is application/ecmascript (if I recall correctly, it may be application/javascript though). If you don't believe me you should have a look here where I had more information and linked off to the Douglas Crockfords videos where he discussed the mime type.

I had something similar recently - opera would just not run a script on an external server... nor if I downloaded it and had it on localhost. It only ran when copy/pasted between script tags into the html page.
It turned out that the script was encoded with UTF-16 and that was somehow confusing the browser. When I converted it to UTF-8, everything ran fine.
So, just in case and if you still have that problem, check out the encoding settings...

I had the exact same issue, tying to load a script from a localhost/development server into a page, hosted on the public server at no avail. The only way I managed the script to load in Opera was to save a copy of the page into a location on the same development server and use the tag to refer to the original domain to get the page's .css and .js linked files. That worked. Looks like Opera doesn't like to mix public and localhost domains, but handles localhost without complaints.

what you're seeing is probably Opera's security precaution against the so-called "phish pharm" attacks: cross-network protection. You can not mix content from a public server and content from a local server.
Have a look at my answer here for a workaround:
Opera won't load some JavaScript files