I have an html file in the same directory of the typescript file. IO have to load it and return it from the function.
public ...(... ) : angular.IHttpPromise<string> {
...
return $http({
method: 'GET',
url: 'help.html'
});
Error: NetworkError: 404 Not Found - http://localhost:3000/help.html
The directory does not matter. Why?
The typescript file is actually javascript and this runs on the browser ie. the client's machine and not your server. The client has no clue what the structure is on the server so placing these files in the same folder is a convenience for the developer and nothing more.
The HTM / HTML file is hosted on your server and the server knows nothing about the client.
To fix it - You have to specify the path to your html file in the $http command so the server knows where to pick it up from. The path always starts at the root of the folder that is hosted by IIS (or appache or whatever). So if you are hosting it in a folder named someFolder in the root of the web site folder then your url that you would use in the typescript file would be /someFolder/help.html.
If you want to manually test that the url is correct you should be able to put it directly in the URL of your web browser (along with the host) and it should return the content.
Related
In the Next JS server-side pages/api, I have a function that makes a post request to a service requiring two files.
I am trying to read these files using the following code:
var fullPhotoPath = process.cwd() + '/public/photos/photo.png'
var photoStream = fs.createReadStream(fullPhotoPath)
This works when I run the app locally, but it fails with file not found error when deployed.
I assume the pathing in server changes because of webpack, though I am not familiar with NextJS.
Things I have tried:
Use relative path
Move photo files to different locations either public or private folders
Deploy in different environments: same error in both Firebase or Vercel hosting.
Workaround with getStaticProps/getServerSideProps: can't send file to API functions since they aren't JSON-able.
Thanks for suggestions.
My question is very simple:
I'd like to read a configuration json file relying on the front end side and not on the server.
The file name and path is hard-coded in the JS file.
I am not the getting its name from some file dialog like in many examples on SO.
I also tried some suggestions to use fetch like:
fetch('./data/properties.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.log(error));
but I always got errors like
exh.js:30 Fetch API cannot load
file:///C:/Users/myusername/WebAppsProjects/BBSimFE/data/properties.json.
URL scheme must be "http" or "https" for CORS request.
I also installed and CORS Chrome extension and turned it on => no help.
I also tried to understand whether I can use FileReader.
For example:
var fr = new FileReader();
fr.readAsText(new File([""], "./data/properties.json"));
fr.onload = function(evt){
alert(fr.result);
}
But this returns nothing.
Also, I am not using node.js so I cannot use require();
Please assist.
Thanks
For security purposes, fetch does not work for file urls, so opening your file in the browser won't work. You should set up a local testing server so XHR requests work properly. Some options include running python -m http.server 8080 in the directory that your files are in then navigating to http://localhost:8080 in the browser, or using a plugin like vscode's live server plugin.
Hey) For security purposes you should not store important configuration info on your frontend side. It should be on server side.
But if you store not important info in your config file, you need to lift a server on localhost, port may be any. Also you need to do your folder with config.json is static on server side. After that you have a static folder with needed for you files, at current case it's config.json. On frontend side you need send
fetch('http://localhost:<your_port>/static/config.json', options);
if you set your static folder is static if no then replace static by your static folder name. You can check if your static file is available just go http://localhost:<your_port>/static route and you should see all files|folders inside static folder.
I'm new to all things coding and have tried to use Azure to host a web app. The app is JavaScript using PHP to process MYSQL data. Everything works locally as expected. But when I try to access the app where it's hosted, I see 404 (Not Found) errors on all of my calls to .php files.
I'm using jQuery's getJSON to get data:
$.getJSON('bin/myFile.php', function(data) {
// Process data
})
Then in the browser console I see:
GET https://mysite.azurewebsites.net/bin/myFile.php 404 (Not Found)
But, if I move that file to the root directory and drop the bin/ from my call, it works perfectly. All other calls to files in folders work fine (images, scripts, styles), only the php files in the bin folder return this error.
Anyone know why?
Answer from comments:
Try renaming your bin folder. That is normally where binary files are placed in a windows web app environment, so it's possible the Azure server is configured to not serve any files from that location –
Rory McCrossan
Sep 26 '17 at 16:22
I am trying to load up local file(todo.json) that is in the same folder as my webpage with the following line:
$http.get("todo.json").success( function( data ){ //Do Some logic});
But I get the following error message in the Javascript console:
Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/quickCoder/Desktop/HTML5Apps/todo.json'.
...
As mentioned, the index.html file consisting of this code is in the same HTML5Apps folder as todo.json. Any suggestions ?
I think you need a running webserver that serves your files and the json file have to be in the folder of your server.
You can use a server like node-serve. It's easy to run once installed just type serve in your terminal.
[...] Now the protocol for a local file is not http:// but file://. Therefore, you cannot do a direct AJAX request from a local file. The same applies to many other APIs available through JavaScript, which can only request access through the HTTP protocol. This is because of the Web's security model, which we'll discuss in another article.
source of the quote mdn
I have Web UI developed in simple HTML and .js with lighttpd as web server and it is on linux based device.
I need to keep my main.html file in root directory and javascript files in js folder.
While running program it reads the javascript from js folder and the javascript accessing config files from other directories (/etc/config/myconfig). While accessing this file application giving error as 403 since I am using XMLHttpRequest, but it works when I keep myconfig file in root directory i.e with the main.html.
Please suggest is there any way to tell javascript to read file from /etc/config directory.
Error 403 :
403 Forbidden
The request was a valid request, but the server is refusing to respond to it.[2] Unlike a 401 Unauthorized response, authenticating will make no difference.[2] On servers where authentication is required, this commonly means that the provided credentials were successfully authenticated but that the credentials still do not grant the client permission to access the resource (e.g., a recognized user attempting to access restricted content).
You need give your script access to read from the directory(/etc/config).
Read about chmod/chown commands.