http://jsfiddle.net/FarqA/
ajax_info.txt is a valid file on my computer. The error returns as thus:
Uncaught Error: INVALID_STATE_ERR DOM Exception 11
Many browsers will refuse to load local files through an XMLHttpRequest as a security measure. AJAX requests are restricted by the Same Origin Policy, but as the linked Wikipedia page notes,
The behavior of same-origin checks and related mechanisms is not well-defined in a number of corner cases, such as for protocols that do not have a clearly defined host name or port associated with their URLs (file:, data:, etc.).
Loading a local file, even with a relative URL, is the same as loading a file with the file: protocol. Many web browsers restrict this, with good reason - imagine running a malicious HTML file on your local machine that could load any file on your computer and post its contents to a remote server.
So my guess is that the problem is that you're trying to load a local file. Try serving your script on a local or remote webserver and see if that fixes the problem. (If you have Python installed, you can go to the directory in question and run python -m SimpleHTTPServer 8000, then go to http://localhost:8000/ in your browser).
In your script each call too HTTPRequest() is creating a new request object, so the request with the onReadystateChange handler is never getting sent and request that is sent has no handler function. Here's an updated version of your fiddle that should work: http://jsfiddle.net/HwYUS/
Related
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.
I am currently learning WebGL. In a call to texImage2D, which is called when a texture has finished loading, I get the following SecurityError:
Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at /path/to/texure.png may not be loaded.
However, the file is on the same domain, in fact it is in the same directory as the html file requesting it.
Here is the file layout:
> js
|-> script.js
|-> glUtils.js
|-> sylvester.js
> texture.png
> index.html
And when I look in the F12 console's resource list, the image texture.png is there, fully loaded, and it is 256 x 256. Why does it think I am requesting from another domain?
The solution is that you must be on a local webserver, because file:/// domain requests will not be granted. (Information given by Pointy:
If you serve up the stuff from a local webserver it'll work, because the browser will see those as being from the same domain. Chrome used to have an command-line option to allow it: --allow-file-access-from-files but I don't know if it still works
You're probably getting the error because you're using a file:// based URL.
The solution is to use a simple web server. Open a terminal and type
python -m SimpleHTTPServer
then go to http://localhost:8000 (install python if you're on Windows) or use node.js or possibly even better use devd
Do NOT use --allow-file-access-from-files. This opens your machine to getting hacked through the browser. That would be like turning off your firewall or your virus scanner.
I am running a tomcat server and my localhost base domain is :
C:/apache/webapps/ROOT/
My webpage is also present here.
However the javascripts are present in an external location.
D:/something/something
And i am importing them the following way
<script src="D:/something/something/js1.js"></script>
In IE the page loads fine and able to locate the scripts, however with chrome it fails.
On debugging I see that chrome tries to append the following:
http://localhost:8080/D:/something/something
How do i get it to work on chrome without copying the scripts to base location?
For doing anything useful from within the JS code, you'll most likely have to obey the same origin policy. This means you'll have to configure your Tomcat so that it serves the scripts, too.
If you really insist on reading the scripts from local files, that's what file:// URLs do.
You can't do this because you will search for D:/something/something/js1.js in the user/client computer.
You can do it calling (read and print) the file via PHP (D:/something/something/js1.js.php) or any other server side programming language or installing a webserver in your external location to call the file via URL like myCDN.mydomain.com.
EDIT: If you will only work in localhost, use #Pointy and #Konstantin K solutions :)
I am looking for a method that helps quickly identify if a js form error is related to cross domain policy mecanism. If possible this method needs to be done from remote connection, as I do not have access to production server and everything is working fine in local sandbox and staging server. The issue only comes up on production server.
This occurs on a drupal webform that has a file upload field, used for an image upload. Ie8 and Ie9 fail to upload, the throbber runs indefinetely and a js ajax message is returned and interpreted as a downloable file. The file contains the ajax response.
I am by no means a js guru and this one has me stumped. How would one identify / troubleshoot this issue?
I obviously can't use server side languages, this is just a page on my desktop.
I tried using AJAX with jquery, but I get the following error message
Sorry but there was an error: 0 [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js Line: 4"]
It has to do with the browser not loading scripts because it's hosted locally or something. So is there any way I can include files on a local machine without installing web server software?
This is an XSS error. You can't make http requests to third party sites (urls not on your domain). You would need to use a proxy to make requests to the page (or have the owner allow your site to make XSS requests).
Shameless plug of a library that I wrote the solve similar problem. We wanted to be able to splice HTML files for backend implementations without the overhead of a local HTTP server implementing server side includes. This library works on HTTP or local filesystem. But, as the repository README notes, you'll have to enable a --allow-file-access-from-files flag to your Chrome runtime. Other browsers work out of box.
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
The above will take the contents of /path/to/include.html and replace the div with it.