PaperJS importSVG from local file - node.js

Having recently resolved an issue I was having with PaperJS canvas I am currently trying to import an SVG via the project.importSVG() function.
I can successfully import a http addressed file such as this: https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg
However all local file uploads fail with 'error code 0'. I thought prepending the path with file:// might do something, but no dice
Error code:
Error: Could not load "file:///Users/#####/Documents/####/########/green-leaf_final.svg" (Status: 0)
The javascript code I am using is:
project.importSVG("file:///a/path/to/file/green-leaf_final.svg", function (item) {
console.log(item);
});
N.B: a warning comes up for local files also saying:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///a/path/to/file/green-leaf_final.svg. (Reason: CORS request not http).
Which personally seems even more confusing - I am not trying to read a remote resource, but perhaps the file:// prefix is interpreted in this way?

The answer to this question is more about general web hosting and web browsers than anything else.
Whilst this answer might not tell you directly why, any file being accessed from a remote origin (or even in your local machine), for specific browser request types, stops you from accessing this resource unless a 'CORS header' is included with within the origin.
Presumably, a local file system cannot supply this information, and as such you should host your file on localhost or another hosting means you have available in order to do it.
If you are already developing in PaperJS (and therefore likely have npm as a command-line tool) and this sounds daunting, then use npm install http-server -g and check the docs here for information about flags to provide and how to start the server. For this purpose you should navigate to the desired directory where your target file is in an OS command line shell and write http-server -o --cors.
The above command should serve all your current directory's files on localhost.

Related

ngrok does not load NodeJS app from outside (ERR_CONNECTION_TIMED_OUT)

ngrok is a program with which you can make a local tunnel, it generates a temporary domain for you so you can redirect people to your local content, and also use https via localhost.
https://ngrok.com/
localtunnel is just another alternative.
So I have set up either ngrok and a localtunnel but both show a white page with only the HTML loading and not css or js when loaded outside of my network (with data plan for example)
The problem is nothing gives an error, the only thing I can see is ERR_CONNECTION_TIMED_OUT when using a hotspot.
Everything works within my own network.
I have tried turning off the firewall already but it seems to make no difference, also tried looking with the chrome remote debugger but it just disconnects when I load the url.
Thing is when I go to https:// on the ngrok url I get a bunch of mixed content errors, but not when I go to http. Seem illogical to me that it would default to http when using a https link... all of my script/style tags are relative paths.
Anyway so far this is only thing that I can figure out, any ideas on what might cause this?
So it's either
ERR_CONNECTION_TIMED_OUT
or
Blocked loading mixed active content
or both?
So I go it working now by changing the base href.
<base href="http://yoururl.ngrok.io">
And also changing some paths in my config to either /app/ or ../ respectively, but most of these were already set correctly and all I did was revert them after changing the base url.
As far I understand now the problems only really start to occur when connecting to the url through a data plan and not wifi.
Some random image paths in css/js will not load, and it also appears to behave differently on Firefox and Chrome for some reason.
Problem is I cannot keep testing this indefinitely as data will obviously run out some time and I have no reliable way of debugging the console errors on mobile...
In conclusion it works on a "normal" connection now (ie Wifi/Cable) but not on data.

Localhost webserver denying PUT request

I have configured a webserver on localhost with https using Microsoft IIS Administration. I am able to browse directory with files with browsers and Visual Studio using localhost prefixed with https, such as https://localhost/trial etc.
I wish to upload a file to the said directory, ie., trial, using Libcurl to test some features. Unfortunately I'm unable to do so.
Using the same Libcurl example as given on
Libcurl File Upload
-modified for https, the console window tells me that the following has occurred, upon running the code :
IIS 10.0 Detailed Error - 405.0 - Method Not Allowed
HTTP Error 405.0 - Method Not Allowed The page you are
looking for cannot be displayed because an invalid method (HTTP verb)
is being used.
I checked the IIS Administrator and saw that all authorizations are allowed. I suppose the fact that it is flagging a HTTP verb issue rather than HTTPS as I'd enabled and used as URL in code isn't a big thing?
Libcurl uses PUT for uploading files, so should be an allowed verb.
I am quite new to this, so I'm not certain I did something incorrect with the setting up of the webserver, or whether there are security issues or permission issues which are causing a problem here.
As far as I know, there is impossible to use http put or post a file to a IIS web application's folder without writing server-side code. Otherwise, configure an FTP site on your IIS installation. Then you could use ftp command to upload the file.
If you really need using HTTP put or post to upload the file, you could consider using WebDav.
More details about what is webdev and how to use it, you could refer to below article.
https://learn.microsoft.com/en-us/iis/install/installing-publishing-technologies/installing-and-configuring-webdav-on-iis
https://learn.microsoft.com/en-us/iis/get-started/whats-new-in-iis-7/what39s-new-for-webdav-and-iis-7
Try hostname instead of localhost
Add a trailing slash (/) for the directory.

Load local Electron files as secure content

Electron loads local resources by default via the file:/// protocol, which, of course, has its own limitations. Serving under the file:/// protocol will disable you from sending AJAX requests to files also locally stored and will also block Browser APIs like navigator.getUserMedia(), throwing a "Permission denied" error. The latter bothering me the most, I was unable to find any way around it. Is it possible to somehow cheat the browser the content is served over the https protocol? Could I run a localhost server via electron?
Any suggestion would be highly appreciated.
Thanks in advance!

Changing localhost server files are served from using Node (Webstorm /maybe IntelliJ)

I'm not sure what I'm missing here, so hopefully someone can help me out. I'm working on a project where we're using Node and in the Run/Edit configurations I've down the following:
Node interpreter: This is the path to the node.exe file
which I checked out from Subversion
Working directory: this is where the "app.js" file is, this is the
path that from the command line you type node app.js and it starts the server
JavaScript file: app.js This is the name of the file that actually creates the server
Now from the main nav bar when I do Run / Run my server the box at the bottom pops up and tells me that Express server is listening on port 3000. Cool.
I can navigate to localhost:3000/myPage.html and I can get to the page just fine.
I added as JSON file to the same directory on my hard drive that myPage.html is in, and I can navigate to that as well by localhost:3000/largeTestData.json.
So the server is up and running and serving file as it should. My problem is that in my Webstorm project, I want to make an AJAX request to that largeTestData file. I do so using jQuery like:
var data = $.get('localhost:3000/largeTestData.json');
data.done(function(data){
console.log('here is your data');
cnosole.log(data);
})
When I do that I get the error (in Chrome)
XMLHttpRequest cannot load localhost:3000/largeTestData.json. Cross origin requests are only supported for HTTP.
and so I look at the URL and I'm seeing:
http://localhost:63342/
Obviously Webstorm has started the server correctly, but when I view an HTML file, it's not using that server (which, of course is why I'm getting the CORS error.
There's some fundamental stuff here which I'm obviously not getting. I need my IDE to deploy to the Web server that it started up, but it's not doing that. Please, someone give me a once over on all the technologies that I'm missing out on here.
WebStrom didn't start your node.js server, but serves static pages by its own internal HTTP server which doesn't know anything about node.js and Express.
The main problem:
When you start your node.js server, it's serving JSON files on port 3000. If you open an HTML-page with the little menu in WebStorm (where you can choose the browser), WebStorm opens the browser with an URL pointing to its own internal webserver running on a different port (e.g. 63342). JavaScript security prohibits loading data from a different host/port Same-origin policy.
It's not WebStorm's fault and you need a solution for this problem in production or you can't go live.
General Solution:
Either you have to ensure that HTML pages and JSON data come from the same host+port, or you can circumnavigate with (a) setting server-side headers ('Access-Control-Allow-Origin: *') as #lena suggested, or (b) using JSONP. Below you find some thoughts using nginx as a reverse proxy so from browser's point of view all requests go to the same host+proxy. It's a very common solution, but as mentioned above, there are other options.
Primitive solution:
Don't use WebStorm to open your browser. Load the page from http://localhost:3000/ and change the URL of the REST resource to $.get('/largeTestData.json'). You'll miss some comfort from your IDE, but you can immediately see that your program is working.
Comfortable solution:
As #lena suggested, there is a way to configure your Express/node.js as a server known to WebStorm. I haven't tried it, but I suppose you can then just press the Run-button and maybe the node.js plugin in WebStorm is as intelligent to know the static-maps in Express and know how to map an HTML-file to a web application URL and open the page in the browser with the URL served by your node.js application. (I'd be surprised once again if this really works magically, but maybe you can configure a mapping from files to URLs manually, I don't know.)
Dirty solution
With some options you can disable security checks, at least in Google Chrome. Then it's possible to load JSON data from a different port than your HTML page. I wouldn't recommend using these options (just my opinion).
Additional Hints
If you do more than just playing around with node.js and some UI fun and you have to serve your application "production-ready", then have a look at nginx to serve your static files and reverse proxy node.js requests from there. I'm using this setup even for development and it works like a charm.
Of course node.js / Express is able to serve static files as well, but IMO placing something like nginx in front of node.js (clustered) bring a bunch of advantages for production sites, e.g. load-balancing, ssl-offloading, avoid JSONP, in many cases performance, easier deployment updates, availability.
To get your code working, just change the URL in $.get() to full URL (including protocol):
var data = $.get('http://localhost:3000/phones.json');
In Webstorm 2016.3 (and probably earlier) there is now another option. Under the Configuration Settings for NodeJS runs, one can manually set the page and port to be loaded via Webstorm's "Browser/Live Edit" settings.
See the screenshot below for settings one can change.

getting 404 error accessing CFM page

I am trying to access a coldfusion file on Server.
The file with xyz.htm extension works fine where as when I convert the same html into coldfusion file, like xyz.cfm , it throws following error:
404 - File or directory not found.
The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.
May I know what could be the reason?
Assuming CF8 on IIS6?
Could be that you've not correctly run the wsconfig.exe tool which will tie in CF to IIS etc.
Need to know which version of CF, which webserver/OS & versions to help further.
Basically, the webserver needs to know how to parse .cfm requests; without running the webserver connector tool, it won't know which files to use to actually deal with the .cfm files.

Resources