WebSocket handshake: Unexpected response code: 404 - javascript

Am writing my first websocket program and am getting "WebSocket handshake: Unexpected response code: 404", error while loading the webpage.
I am using JDK 1.7 and jboss 8 (wildfly8.0).
Could anyone please assist?
window.onload = init;
var socket = new WebSocket("ws://localhost:8080/WebsocketHome/actions");
socket.onmessage = onMessage;
and head in html
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="websocket.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Thank you guys for your suggestion, I found the answer.
The code I copied is from http://www.oracle.com/webfolder/technetwork/tutorials/obe/java/HomeWebsocket/WebsocketHome.html site.
The problem was the url as mentioned in the js file and the project name they are proposing is WebsocketHome. I had changed the project name to Websocket thus my url should be ws://localhost:8080/Websocket/actions.
Thanks for your support.

Actually, the problem here is case-sensitivity in the URLs. You did not need to change the project name. Just changing the Websocket URL in JavaScript file to
ws://localhost:8080/WebSocketHome/actions
(with capital S, as in the project name) would have solved the problem. In your case, changing both of them removed the case inconsistency, so it worked.

It's because of the issue of /info=34424 - with 404 error - that I had to abandon using the xml approach suggested at other places. I have Spring 4.2 in my project and many SockJS Stomp implementations usually work well with Spring Boot implementations. This implementation from Baeldung worked(for me without changing from Spring 4.2 to 5). After Using the dependencies mentioned in his blog, it still gave me ClassNotFoundError. I added the below dependency to fix it.
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>4.2.3.RELEASE</version>
</dependency>
Baeldung's implementation curiously does not make any such calls
flow/websocket/add/info?t=1540813753999
What it does (on send and receive) is below. I am only pasting it in case people well-versed with these libraries can further add insights on this forum.
>>> SEND
destination:/app/chat
content-length:38
{"from":"nicholas","text":"try again"}
<<< MESSAGE
destination:/topic/messages
content-type:application/json;charset=UTF-8
subscription:sub-0
message-id:m3p096zk-11
content-length:53
{"from":"nicholas","text":"try again","time":"13:46"}

My guess is that you are trying to contact the websocket with a normal browser.
That is not allowed and gives a 404 error. You need to use a script or curl to address websockets.

Related

"Missing PDF" every time I use Grapecity PDF Viewer

I'm building an app that will have an interactive PDF form on a server (in HTML, CSS, JS). I have been trying to use the Grapecity PDF viewer, but to no avail. I've followed the documentation to a T, using these resources: one, two, three.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>GC Viewer Demo | PDF Plugin</title>
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css">
<script>
function loadPdfViewer(selector) {
var viewer = new GcPdfViewer(selector, { renderInteractiveForms: true });
viewer.addDefaultPanels();
viewer.open("HelloWorld.pdf");
}
</script>
</head>
<body onload="loadPdfViewer('#root')">
<div id="root"></div>
<script type="text/javascript" src="gcpdfviewer.js"></script>
</body>
</html>
I currently have the "HelloWorld.pdf" and the gcpdfviewer javascripts in the same folder as the above index.html but every time I test the code in the browser, the PDF viewer loads, but the PDF doesn't, giving me an error that states "missing PDF."
This is really bothering me because the PDF is exactly where it's supposed to be, I think.
I'm currently not using a license key, but the documentation makes it seems like I don't need one. Maybe that's the issue.
Any ideas?
Edit - Here are the console errors in Chrome:
The pdf worker has been disabled. Note, rendering PDF in foreground thread can slow pdf viewer performance.
ce # gcpdfviewer.js:1
index.html:1 Access to XMLHttpRequest at 'file:///C:/HelloWorld.pdf' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
HelloWorld.pdf:1 Failed to load resource: net::ERR_FAILED
index.html:1 Uncaught (in promise) V
Firstly, the issue is not because of the non-license version.
The issue occurs because you are trying to execute the sample locally using the file system. To overcome this issue, you should host the application on a local server and the Pdf will be loaded in the PdfViewer.
While loading a Pdf in the PdfViewer, there is XMLHttpRequest which checks the origin. This is null in the case of the file system. Hence, throws the error on accessing the file.
Here is the documentation link for configuring the PdfViewer:
https://www.grapecity.com/documents-api-pdf/docs/online/view-pdf.html
Regards,
Manish Gupta
Thank you for using GCPDF Viewer. Is the filename exactly the same, it might be case-sensitive OS?
Can you look in the browser network tab and watch for the request going to retrieve the PDF file, is it looking in the same location where you have placed the file.
which server software are you running? is it serving the PDF file?
http://www.grapecity.com
As stated earlier, for security reasons, it is not possible to access files on your local filesystem via JavaScript, you need to set up a web server and open PDF files using the web server url.
But if you really want to do it, there is another workaround - start Chrome with disabled web security, and then open the index.html page from the local file system, for example:
"c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:/temp/CustomChromeSession" --disable-web-security "file:///C:/temp/gcpdfviewer-test/index.html"
Note, this workaround is not recommended due to security reasons and this approach can be disabled by browser developers later.
Here's a screenshot of how it works

What is a best way to test CORS issue on multiple browser?

I am enabling CORS with Spring security in My project but after implementing what is best way test it ? Because for IE 9+ versions i am not able test it properly so couldn't get confirmation my code is working or not. I developed one Javascript client and hitting ajax request but still it is not working as expected and without proper testing not able to figure out there is issue with Spring Security or test method. I also try https://www.test-cors.org/ but not working for me.
Anyone know this please share.
Thanks in advance.
I go the answer the best way to test CORS implementation is hitting API with separate JavaScript client which may be not in your project. That is the best way to test it. However modern browsers like Chrome and Firefox by default block the CORS requests so proper error will print on the browser's console. Browser's like IE will not block such request by default so make sure your server should enabled CORS requests.
I used below JavaScript code for testing.
<!DOCTYPE html>
<html>
<head>
<title>Hello CORS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$.ajax({
url: "
Your URL"
}).then(function(data, status, jqxhr) {
});
</script>
</head>
<body>
</body>
</html>
Make sure about Jquery versions you are using which may give problem while testing in IE.
Use latest Jquery version.

Fixing js "Script error"

I'm having difficulties implementing something simple: I have an index.html file served on http://localhost:3200 by ruby on rails, which uses a javascript file served on http://localhost:8000 by webpack-dev-server.
So here's what I have:
<!doctype html>
<head>
<script crossorigin="anonymous" src="http://localhost:8000/app.js" />
</head>
<!-- ... -->
</html>
My app.js file is sent with, amongst others, the following header:
Access-Control-Allow-Origin: *
What I want is to be able to override window.onerror in app.js, and see caught errors, rather than "Script error".
What am I missing?
-- edit --
Since it might not be clear enough: my script does load. I have no problem with that. My issue is that I need to report errors that happen to somewhere else, but I can't do that since any error that occurs in app.js is reported as "Script error" rather than something more explicit.
What sourcemap (devtool) are you using?
I was getting this issue, and it changing from eval-source-map to source-map fixed it.
This is a google chrome issue, should be when Chrome 71 is released.
Here are the relevant issue threads:
https://bugs.chromium.org/p/chromium/issues/detail?id=765909
https://github.com/webpack/webpack/issues/5681
Edit: This also impacts electron users.

Unexpected Illegal Token in javascript from CDN - scripts contains only garbled text

I'm trying to host a webpage on my PC (Running Windows 7), and intend to use bootstrap css/javascript library, but I am having trouble using the bootstrap javascript library from a CDN. Here is a minimal example, index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
Hello world
</div>
</body>
</html>
I have tried to host the page on localhost using both "python -m SimpleHTTPServer" and using node.js + express, but I get the same result, where I get the message "Uncaught SyntaxError: Unexpected token ILLEGAL" with reference to bootstrap.min.js:1 in chrome's javascript/html debugger.
If I open bootstrap.min.js it only shows lots of chinese signs (which is translated to meaningless text in google translate). All this goes for other CDN scripts also, such as socket.io.
*Edit 1:
I tried downloading the source and loading the bootstrap.min.js script locally
with
<script src="/js/bootstrap.min.js"></script>
but I get the excact same problem as before.
I had the same problem on my own local page. I thought it might be an issue with the way I was loading bootstrap or jquery as these files were showing what looked like Chinese characters in Chrome Dev tools, even though the js and css files looked ok when loaded from a URL. Googling "Unexpected token ILLEGAL" came up with this question on Stack Overflow, so I'll answer. The issue turned out to be invalid characters in my HTML.
My method to solve was to create a dead simple page from scratch and add the features from the failing page one by one until it resembled my failing page. In the end, the source looked identical in a text editor, but the newly constructed page worked fine while and the original page had the "unexpected token" error in Chrome console. So I compared the files and found some hidden characters (which I had copy and pasted from a web page snippet) which were causing the failure.
When I copy and paste your HTML above into a text file and open it in Chrome, it displays correctly.
In my case the character coding made the same issue.
As soon as I forced the output to save as UTF-8, the issue gone.

Resource interpreted as Script but transferred with MIME type text/plain - for local file

I'm getting a "Resource interpreted as Script but transferred with MIME type text/plain" warning in Google Chrome when including a local script file.
I know the problem appears when loading a file from a server or through ajax which most often depends on wrong headers being set.
The weird thing is that I get this warning even though it is run from a local folder: file:///C:/test/foo.html
This happens only in Chrome with the most basic html there is:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="bar.js"></script>
</head>
<body>
</body>
</html>
bar.js is also as simple as it can get:
function hello() {}
I've tried adding a meta tag:
<meta http-equiv="content-script-type" content="text/javascript">
and tested with other doctypes but nothing seems to help.
This obviously isn't a real issue since the scripts still work fine, but I'm working on a large project and currently have around 150 scripts included. It therefore makes it difficult to see when an actual warning occurs in between them.
Everything works fine when I run the file on a server, locally or remote.
Any ideas on why chrome is annoying me with this?
I figured it out!
The Visual Studio installer must have added an errant line to the registry.
open up regedit and take a look at this registry key:
See that key? The Content Type key? change its value from text/plain to text/javascript.
Finally chrome can breathe easy again.
I should note that neither Content Type nor PercievedType are there by default on Windows 7, so you could probably safely delete them both, but the minimum you need to do is that edit.
Anyway I hope this fixes it for you too!
I tried fixing this problem using this method but it didn't work for me.
My problem was that IIS manager didn't have MIME types in HTTP Features.
I was able to turn it on by enabling Static Context via...
--> Control Panel
--> Programs
--> Turn Windows features on or off
--> Internet Information Services
--> World Wide Web Services
--> Common HTTP features
--> [X] Static Content.
After this, MIME types appeared and everything started working again.
The accepted answer is a great one! However, just to post an answer for those who encounter problem like me, who use a department/college computer sometimes, where I do not have the permission to change any key value in regedit.
Change
<script type="text/javascript" src="main.js"></script>
to
<script src="main.js"></script>
Although the error message still exist, the page loaded correctly.

Categories