Not allowed to load local resource: JSP - javascript

I want to download a simple file by a link in jsp, but this name have a Chinese characters. Here my simple code :
<%# page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
My link
</body>
</html>
that gives an error in navigator console : Not allowed to load local resource.
Thank you for your help :)

The problem are not the characters is the fact that you are trying to access the local disk. Your code is executing in a browser, and, for security reasons, you cannot access the local disk of the machine on which the page is displayed. Not to mention that, if that would have been allowed, it will load something different on every machine it runs on :).
So, either you use relative path in your HREF, or full URLs.
Remember, when you specify a link it goes to the SERVER to get the resource, not from local machine on which the browser is running.

Do not import or load local resource in this format:
src="file://home/web-server/foo/bar.jpg"
Because modern browsers not allowed to load files on server disk.
I suggest that you tell your proxy server to server the dir
foo
as a static file dir which browsers can access via your proxy server. In NodeJS, it will be like (suggest this file in /home/web-server named app.js)
var express = require("express");
var app = express();
app.use(express.static(path.join(__dirname, 'foo')));
Now, in your html code, you can call
My link
Then, you will see browser access your file by
http://yourdomain.com/4.导轨安装板.PDF
which will work.

Related

fetch api cannot load, url scheme 'file' is not supported

i tried to use fetch on localhost, but it didn't work.
here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
fetch("hi.txt").then(function(response){
response.text().then(function(text){
alert(text)
})
})
</script>
</body>
</html>
hi.txt file is in same folder with the script file.
below error is shown in console:
index.html:12 Fetch API cannot load file:///C:/~~~~/hi.txt. URL scheme "file" is not supported.
(~~~) is path
Since your URL is relative (it's just "hi.txt"), it's resolved against the URL of the page the code is running in. In your case, that appears to be file:///something — that is, a file you've loaded directly from your file system, not by requesting it from a server. Chrome doesn't allow fetching from the file scheme. The file scheme's origin is null. The Chrome team's interpretation of the Same Origin Policy is that no origin, not even itself, should match null. (A reasonable interpretation in my view, but opinions can vary.)
When doing web development, you want to be working through a server process because pages loaded directly from the file system behave differently in several sometimes-subtle ways vs. pages loaded from servers.
There are a couple of ways to do that:
Use the features of your IDE, if you use one, and/or extensions to it. For instance, for VSCode there's the "live server" extension which makes it very easy to run your code from a minimal server.
Use an actual web server process running locally. There are simple ones that are easy to install.
Use one of various "quick start" scaffolding tools that set up simple projects for you, often via npm (and Node.js), with a command you can use to build and run the project locally in development mode.
hi you are running your file like this way
-you are right clicking on your html file-opening with it browser. This way you are telling to browser to open your html file from your file location where you have saved it.Check in Your browser url bar you will get something like this C:/xampp/htdocs/xyz.html so this is your local directory file system. so now you have to first start your sever such as xampp or whatever server you have installed and then you type this localhost/filename or /subfolder name and / file name if you have stored it in subfolder...and hit enter.inshort you have to query to a server like you does in php file calling.....
You can just create a local web server (XAMPP) and upload there your hi.txt file. If you did that, replace
fetch("hi.txt")
with
fetch("http://127.0.0.1/hi.txt")

HTTP status 404 the requested resource is not available while opening HTML page

I am a complete newbie to this and I'm using Eclipse Oxygen platform to run my application and Apache Tomcat 8.0.36 server.
Firstly, I created a simple HTML page first.html in WEB-INF folder inside my project.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>First Page</h1>
<a href="MiniPro/WebContent/WEB-INF/NewFile.html" >Press Here</a>
</body>
</html>
When I run this code, it directs to this link http://localhost:8081/MiniPro/WEB-INF/first.html
and shows an HTTP status 404 error.
Even when I tried this
http://localhost:8081/MiniPro/WebContent/WEB-INF/first.html
it shows the same error.
When I changed the location of first.html page into WebContent folder and run it is showing the result.
Can someone tell why it was not working when it is placed inside WEB-INF folder.
A special directory exists within the application hierarchy named
WEB-INF. This directory contains all things related to the application
that aren’t in the document root of the application. The WEB-INF node
is not part of the public document tree of the application. No file
contained in the WEB-INF directory may be served directly to a client
by the container. However, the contents of the WEB-INF directory are
visible to servlet code using the getResource and getResourceAsStream
method calls on the ServletContext, and may be exposed using the
RequestDispatcher calls.
If you want to keep your file in WEB-INF - you need a Servlet to manage it.
Just a general example of how to get HTML file with servlet:
RequestDispatcher view = request.getRequestDispatcher("mypage.html");
view.forward(request, response);
Otherwise, move your file outside WEB-INF and try to get it with http://localhost:8081/MiniPro/first.html
You May try the ~/<path here >/<file>
~ this will help you point the Home path from you localhost
You are using the path like
MiniPro/WebContent/WEB-INF/NewFile.html
above that path has been located like
http://localhost:8081/MiniPro/WebContent/WEB-INF/first.html
so you can use instead of http://localhost:8081 use the ~
~/MiniPro/WebContent/WEB-INF/NewFile.html
the WEB-INF directory is special in a web project. It is designed that not allow direct visit for outside, but you can visit it with your servlet or jsp code.

Having issues getting livejs.com

Having some issues getting the livejs.com script to automatically update web pages for changes made to HTML/CSS/Javascript. Below is my HTML on my localhost and it points to the web location of the script, which is accurate. Can you help me understand why my web pages don't update when I save my html?
<!DOCTYPE html>
<html>
<head>
<title>Page Title-Sam</title>
<script type="text/script" src="http://livejs.com/live.js"></script>
</head>
<body>
<h1>My First Heading adfasdfadf this is cool</h1>
<p>My first paragraph.</p>
</body>
</html>
Typo
type="text/script"
This is not a format of script that browsers recognise. It should be text/javascript.
In HTML 5 you should omit the attribute entirely.
Working locally
From the homepage:
Just include Live.js and it will monitor the current page including local CSS and Javascript by sending consecutive HEAD requests to the server.
If you are working from a local file (i.e. without a web server) then there is nowhere to make the HEAD request to. You need to be testing using HTTP(S).
Server support
The script checks a variety of headers, including Etag and Last-Modified. If your server doesn't set any of them for static files, it won't be able to tell when the file has updated.

Saving .json file using javascript

I want to save json file to my application's directory using javascript. how to do it? my code only opens a new tab when you click download button and display the content of my json file. I am allowed to use client-side scripting only. I've tried this code but not working.
NOT WORKING CODE:
var fso = new ActiveXObject("Scripting.FileSystemObject");
var s = fso.CreateTextFile("location", true);
s.WriteLine(json);
s.Close();
Here's my code..
HTML CODE:
<!doctype html>
<html manifest="survey.manifest">
<head>
<title>Offline Survey Application</title>
<link rel="stylesheet" href="styles/survey.css" type="text/css">
<script type="text/javascript" src="scripts/survey.js"></script>
</head>
<body>
</body>
</html>
Javascript code
window.onload=function myFunction()
{
var btn=document.createElement("BUTTON");
btn.setAttribute('id', 'dButton');
btn.setAttribute('value', 'download');
var t=document.createTextNode("DOWNLOAD");
btn.appendChild(t);
document.body.appendChild(btn);
btn.onclick=function clickedFunction(){
var url = "http://localhost/JSONFiles/survey.json";
window.open(url, 'download');
}
};
thanks in advance friends! :)
What you are trying to do would kill a lot of kittens.
For safety reasons, a web page cannot use activeX objects on a whim, nor access the local computer resources like file system in any way except what is allowed by standard (basically the cookies and local storage files).
That would allow any Russian hacker and his rabid dog to wreak havoc on computers all over the planet.
You can, however, try to use local storage if your json files are not too bulky and you don't expect to reuse them from another application.
If you plan on downloading json files, just point to them (i.e. put a link to whatever .json file somewhere on your page) and when the user clicks on such a link the browser will pop a save requester to let the user free to save the files in a location of his/her choosing.
If all you're trying to do is get a file on your server to download automatically instead of be viewed in the browser, you just need to set the Content-Disposition header the file is sent to the client with to "attachment". The easiest way to do that is to modify the config files for whatever server your using to add a rule for files of type .json. The exact methodology will differ depending on your server, though.

STS Spring MVC: How to include a JS file in a JSP

I installed SpringSource Tool Suite 2.8.0.
I'm trying to include a JS file in a JSP, using the Spring MVC template as a starting point.
My JSP looks like this:
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# page session="false" %>
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="/a.js"></script>
</head>
<body>
Hello world!
</body>
</html>
a.js is under src\main\resources and looks like this:
window.alert("A");
The result is that "Hello world!" gets printed without the alert :-(
I tried putting the JS file in different places, changing the src to be with/without "/", and even adding a servlet-mapping in web.xml to use "default" servlet for "*.js".
Nothing seems to work.
What am I doing wrong?
is the js file getting included in your .war file? I usually put my js and css in src/main/webapp. something like src/main/webapp/js and src/main/webapp/css.
Secondly, you can reference it appropriately using c:url which will take care of putting the app context on there and stuff.
<script type="text/javascript" src="<c:url value="/a.js" />" />
You can use firebug or chrome's developer tools to see if you are getting a 404 for a.js and see what path it is actually requesting.
I advise placing those js files under webapp folder. (I usually put them under webapp/resources/js)
And to make this path accessible, I use the mvc:resources tag:
This tag allows static resource requests following a particular URL
pattern to be served by a ResourceHttpRequestHandler from any of a
list of Resource locations. This provides a convenient way to serve
static resources from locations other than the web application root,
including locations on the classpath. The cache-period property may be
used to set far future expiration headers (1 year is the
recommendation of optimization tools such as Page Speed and YSlow) so
that they will be more efficiently utilized by the client. The handler
also properly evaluates the Last-Modified header (if present) so that
a 304 status code will be returned as appropriate, avoiding
unnecessary overhead for resources that are already cached by the
client. For example, to serve resource requests with a URL pattern of
/resources/** from a public-resources directory within the web
application root, the tag would be used as follows:
<mvc:resources mapping="/resources/**" location="/public-resources/"/>
Source: Spring Reference

Categories