With a webpage hosted locally on my system, with socket.io installed, this page can be served with socket.io.js attached:
<!doctype html>
<html>
<head>
<title>SkyOS</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
</body>
</html>
But if I want to serve this webpage from a webhost like GoDaddy, that file isn't going to be on the directory through installation.
So, that's simple. Just upload socket.io.js onto the webhost. Except one issue:
I can't find socket.io.js anywhere on the web.
So, according to the answer to this question, I shoudln't ever do that. Am I missing something here? Is socket.io not a normal javascript library like any other?
The socket.io server has got the proper client library available and will serve it from the /socket.io/socket.io.js file (depending on your settings the exact contents may vary).
In case you are not using your socket.io server as the general HTTP server simply prepend the proper host.
Related
UPDATE:
It appears the problem is triggered when port 443 is explicitly specified. If I leave it out, no errors. For example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loader Test</title>
<script type="text/javascript" src="https://127.0.0.1/myapp/_vVERSION/dojo/dojo-release-1.16.3/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.registerModulePath("myapp", "https://127.0.0.1/myapp/_vVERSION/myapp");
// The following should create the myapp object/namespace -->
dojo.require("myapp.bootstrap");
myapp.webContext = "https://127.0.0.1/myapp/_vVERSION/";
</script>
</head>
<body>
HELLO WORLD!
</body>
</html>
So, for whatever reason, if :443 is added to the URLs, an error occurs trying to set myapp.webContext.
ORIGINAL POST BELOW:
I am on a project that has a legacy code base that uses the non-AMD Dojo Toolkit method for loading modules. The application runs in Tomcat, and I am testing out running it as an app server behind an Apache httpd reverse proxy (gateway) with SSL and authentication enabled.
When I set the gateway port to a non-standard value (e.g. 4443), everything appears to load and work fine. However, if the gateway port is 443, I get javascript errors that indicate that dojo.require() statements are happening async vs sync, so errors occur in code that tries to reference objects from the required modules.
I have condensed things down to simple test page that recreats the problem (which occurs in Chrome and Firefox):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loader Test</title>
<script type="text/javascript" src="https://127.0.0.1:4443/myapp/_vVERSION/dojo/dojo-release-1.16.3/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.registerModulePath("myapp", "https://127.0.0.1:4443/myapp/_vVERSION/myapp");
// The following should create the myapp object/namespace -->
dojo.require("myapp.bootstrap");
myapp.webContext = "https://127.0.0.1:4443/myapp/_vVERSION/";
</script>
</head>
<body>
HELLO WORLD!
</body>
</html>
The above works with no problems. However, if I change Apache httpd configuration to use the standard https port of 443, and change the 4443 to 443 in the above, I get an error when trying to set myapp.webContext. When using the Network profiler in the browser debugger, it shows the request to the myapp.bootstrap as Pending, not loaded yet. If I configure the debugger to not pause on exceptions, the Network tab shows the module eventually gets loaded.
The use of absolute pathnames in the application is to ensure proper loading of resources and link resolution. This was required a long time ago due to problems in IE, and a configuration setting is supported to indicate the base URL for all hrefs (for cases when running behind a gateway).
As a test, I redid the sample to use all relative pathnames, and the page appears to load with no errors when using port 443. Unfortunately, the real application is quite large, so changing it to always use relative pathnames is not a viable solution at this time.
My gut is telling me the browsers are behaving differently with XHR requests that involve standard ports (e.g. 443) and use absolute URLs. Can anyone confirm this? And if so, why they behave that way?
I am trying to to use a texture from my own hosted webserver but putting it into the asset-item tag I get the following error.
> Access to Image at 'http://192.168.137.1:3000/cat2.jpg' from origin
> 'http://localhost' has been blocked by CORS policy: No
> 'Access-Control-Allow-Origin' header is present on the requested
> resource. Origin 'http://localhost' is therefore not allowed access.
The picture is accessible, since I can see it in the webinspector.
It works perfectly in a simple image tag. Does anyone know what to do here?
Thanks!
Update: My code you could find below:
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
<a-assets>
<img id="cat" src="http://192.168.x.x:3000/cat.jpg"/>
</a-assets>
<a-sky src="#cat"/> <!-- this code works not (CORS) -->
<a-sky src="http://192.168.x.x:3000/cat.jpg" /> <!-- this code works not (CORS) -->
</a-scene>
<img id="cat" src="http://192.168.x.x:3000/cat.jpg"/> <!-- this code works -->
Solution:
I figured out the main problem: It had nothing to do with A-Frame itself, it was a minor mistake on the server. The headers were specified after the fileserver was initialized. Putting the specification in the initialization phase did the trick... of course... :-D
What's CORS?
This is not A-frame or Three.js or WebVR that is an issue. CORS (Cross-origin resource sharing) happens when the JavaScript (in your situation is that this script https://aframe.io/releases/0.5.0/aframe.min.js ) makes a cross-domain XHR (XMLHttpRequest) call (in your situation is that to http://192.168.x.x:3000/cat.jpg ).
On Wikipedia I've found an image that gives more information about the workflow of CORS.
Your request is a GET-request, there are custom HTTP headers and didn't add Acces-Control-* headers, result an error.
More information about CORS I've found on the Mozilla Developer Network.
Documentation from A-frame
Why does my asset (e.g., image, video, model) not load?
First, if you are doing local development, make sure you are using a local server so that asset requests work properly.
If you are loading the asset from a different domain (and that you do), make sure that the asset is served with cross-origin resource sharing (CORS) headers. You could either find a host to serve the asset with CORS headers, or place the asset on the same domain (directory) as your application.
Why is this happen?1
It looks like the script (https://aframe.io/releases/0.5.0/aframe.min.js ) that must be added, loads the images and that's why <a-sky src="http://192.168.0.253:457/cat.jpg" /> is not working at all. Because the image is loaded from the script that is hosted on A-frame.
If you use <a-assets><img src="http://192.168.0.253:457/cat.jpg" /></a-assets>, the image URL is bound to the a-skys src-attribute. And again the image is loaded from the script on A-frames server and makes a cross-domain XHR call.
1 I'm not 100% sure, but there is a big chance that it's correct. If anyone think that this is not correct, please say it. If it is correct, please say it also.
Solutions
Place the file on your local host web server.
Add the response header Access-Control-Allow-Origin when the image is requested. I think, the value must be http://aframe.io.
After many trial and error, I finally found a way to incorporate images from remote server to my local server without facing CORS errors. The solution is using a CORS proxy instead of doing direct request.
Despite the following code is not the most elegant solution, it works for me.
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="frodo" crossorigin="anonymous" src="https://cors-anywhere.herokuapp.com/http://i.dailymail.co.uk/i/pix/2011/01/07/article-1345149-0CAE5C22000005DC-607_468x502.jpg">
</a-assets>
<!-- Using the asset management system. -->
<a-image src="#frodo"></a-image>
</a-scene>
</body>
</html>
Using CORS Proxy, adds all the headers needed to perform the request to the remote server and gather the objects in the src field.
Please note that the src request is: https://cors-anywhere.herokuapp.com/<url_you_are_looking_for>
I am kinda new to both the Python language and the Heroku web interface to web-app deployment. My background is engineering, and MATLAB programming so the whole rails/web scene is new to me. But I am trying to learn the basics for an upcoming project. Towards this end, with the help of a few tutorials around the web, I have managed to successfully couple of Python/NumPy + Flask based apps:
https://matrix-spectrum.herokuapp.com/
https://plot-damped-sinusoid.herokuapp.com/
But as you can already see, in the second link, the LaTeX/MathJax mark-up is not displaying correctly. Whenever I run it on my localhost it works correctly (heroku local web), but once it is deployed that MathJax does not display.
How do I fix this? Why isn't adding:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: {
equationNumbers: { autoNumber: "AMS" },
extensions: ["AMSmath.js", "AMSsymbols.js", "autobold.js", "color.js"]
}
});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
in the header working? The closest question/answer I can find is:
https://groups.google.com/forum/#!topic/mathjax-users/Rpa_WQ6rMkE
But that is about 5 years, old and I suspect there should be more recent developments like:
https://github.com/pmq20/mathjax-rails
But I have no experience with "rails".
Those links use the HTTPS (encrypted HTTP) protocol, but modern browsers often refuse to load unencrypted content if the main connection is encrypted. This is called mixed content.
Your link to load the MathJax library hard-codes an unencrypted HTTP connection:
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
You could switch http:// for https://, but a better approach is probably to simply use //:
<script type="text/javascript"
src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
This makes your link protocol-relative; it will load using the same protocol as the page itself.
I encourage you to learn about your browser's developer tools, which are a great resource when doing web development. The console included there often reveals this type of problem.
I have three web application microservices and one gateway that include the UI. So, what i want to do is to change the app's that every microservice has his own UI and the gateway should make server side includes. Im using Thymeleaf as template engine and do the includes like this:
<div th:replace="http://localhost:8080/#/organizations"></div>
My Problem is that the CSS and JS files are not Included from the original localhost:8080 server rather from the server with includes the content localhost:9090.
This is how i include the JS and CSS files at *:8080:
<script th:src="#{webjars/jquery/$jquery.version$/jquery.min.js}"</script>
Hope you understand my problem and someone can help...
This ${#httpServletRequest.requestURL} did the trick...
<link th:href="#{__${#httpServletRequest.requestURL}__webjars/bootstrap/?{bootstrap.version}/css/bootstrap.min.css}" rel="stylesheet" />
now all works fine.
I think you can't realize the behaviour you expect if you will use resources from localhost. Your test page can access local resources for context 9090, e.g. when it trying to request for example
<script th:src="#{webjars/angularjs/$angularjs.version$/angular.min.js}"></script> from 9090 request goes to 9090 but resources on 8080.
It will work if you will use static resources from CDN (from internet).
Maybe this article will be helpful for you.
Please suggest a method other than use of .htaccess..
It really is homework-due-day today.
Theres httpd.conf (apache)
http://httpd.apache.org/docs/1.3/configuring.html
Or, forcing an "Error 301 - redirect".
Or, you could put a meta-refresh in your webpage redirecting to the new webpage.
e.g.
<meta http-equiv="REFRESH" content="0;url=http://www.the-domain-you-want-to-redirect-to.com">
Or you could use javascript to force the redirect.
<script type="text/javascript">
window.location = "http://www.google.com/"
</script>
Then there are things like Reverse Proxy that could do what you wanted.
Depending on the technology and/or your access to the web server there are various options. In addition to the above you could use a server side code redirect e.g. in ASP.Net
Response.Redirect("http://www.google.co.uk")
I'm sure there are PHP and various other code alternatives to perform the same action.
You can do a client side redirect using an index.html and a META Refresh tag.
<html>
<head>
<meta http-equiv="refresh" content="0;url=http://www.mysite.com/MyDir/MyPage.html" />
</head>
</html>
http://en.wikipedia.org/wiki/Meta_refresh
Implementation-agnostic:
The following status codes can be used in a web server response:
301 Moved Permanently
302 Found
If you don't have access to a decent web server, try the Javascript
or Meta-Tag methods above.
Bonus: another implementation-specific advice, using Hunchentoot:
(redirect "http://otherhost/otherpath")