Socket.IO issue with illegal origin? - node.js

I am using :
"socket.io": "~0.9.10"
I am running into this issue when I go to my apache webserver hosted client.html page hosted on port 80:
XMLHttpRequest cannot load http://localhost:5000/socket.io/1/?t=1348624895534. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
I am running SocketIO on my serverside to be on port 5000 as shown below:
io = io.listen(5000);
io.set("origins","*");
However, everytime I load my apache client.html page, I see in my SocketIO server console:
warn: illegal origin: http://localhost
How do I get rid of this issue?

You are doing CORS.
The error you are getting comes from the fact that Socket.IO seems to be using XHR rather that Websockets. This is what socket.IO does when websockets are not available it uses another protocol, FlashSockets, XHR-polling... etc.
You need to set a header on you apache server to allow a query to be made to another website, here your Socket.io server.
Here is a how to.
It would be a lot simpler for you if you just used only one server.
You could use Express to deliver the static html file. Here is a demo/tutorial app to get started easily with Socket.IO + Express.
This demo is a boiler plate to push on dotCloud, so if you want to painlessly deploy, follow those instructions.

Try setting 'Access-Control-Allow-Origin' header to '*'
response.writeHead(200, {
'Access-Control-Allow-Origin': '*'
});

Related

Socket IO allows CORS request from curl, but not from client application

I am making an application in which i have a node backend, and an angular frontend.
I am using socket.IO to communicate between my client and server.
I was facing CORS issue, which i solved (tried to) as:
const io: SocketIOServer = new SocketIOServer(server, {
cors: {
origin: true
}
}); // only for development
But still, upon making my request from my client app (running in another port) gives me CORS issue.
So i went to my terminal, and made a request with curl,as shown here:
me#Desktop:~$ curl "http://127.0.0.1:5000/socket.io/?EIO=4&transport=polling&t=NV5sBAn"
0{"sid":"jAhPIEEkdy8EY8I_AAAD","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":5000}
This suggests me that curl is being able to access the server, and is not facing CORS issue.
In my client, i am trying to connect to my server as:
socket = io.connect('http://locahost:5000'); // server running at port 5000
Help me with my issue, so i can connect with my server.
Also on a sidenote: If the version of server.io in the app is 3, the curl request to the server is also failing. only upon server.io version 4, the curl request is passing.
The error in firefox if that helps:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://locahost:5000/socket.io/?EIO=4&transport=polling&t=NV5vi1_. (Reason: CORS request did not succeed).
EDIT: my issue is not being able to connect to the server with client. I showed the curl because it was suggested in the socket.io cors configuration webpage.
Because socket.io initiates its connection with plain http requests, it is subject to CORs restrictions. CURL does not enforce CORs restrictions (like the browser does) so that's why you don't see it there.
You have a couple options:
You can enable this specific CORs request in your server to permit it.
You can specify the {transports: ['websocket']} option for your socket.io connection in the socket.io client code that initiates the connection. This will tell socket.io to immediately start with a webSocket connection which is not subject to CORs.
Curl does not implement CORS security restrictions, thus it will always be able to connect. You have different ports for your frontend and backend which are considered different CORS origins. So you either need to set your allowed origins correctly on your server and make sure it handles the pre-flight requests, or have the process serving your frontend proxy requests to the backend so that everything is on the same url from the browser’s point of view
Apprrently, the issue was:
socket = io.connect('http://localhost:5000');
changing this to:
socket = io.connect('http://127.0.0.1:5000');
worked!! I have no idea why this name was not getting resolved!!

Problems connecting front-end app with the server

I have an Angular app running in gh-pages https://yourweatherapp.github.io/yourweatherapp.github.io which make requests to a node.js app that it´s running in a host.
Previously, I have consulted other info on the net like this How to allow CORS?, but solutions don´t work for me
I have configured the node.js app to allow request from this origin on this way:
const corsMiddleware = cors({
origin: [process.env.URL, 'https://yourweatherapp.github.io/yourweatherapp.github.io/login']
})
app.use(corsMiddleware)
app.options('*', corsMiddleware)
But the browser doesn´t allow to receive the answer and do login.
What am I doing wrong?
'https://yourweatherapp.github.io/yourweatherapp.github.io/login'
Look at the error message in the browser console. It will tell you the origin that doesn't have permission to read the data, and it won't be that.
Origins do not include paths. So that is not a valid origin.
It should be only https://yourweatherapp.github.io

angular universal https problems

I have an angular universal app set up. I do POST requests on the server-side using localhost to pre-render my app and this works fine.
An example working url would be http://localhost:8000/api/get-info.
I've now put the app into production on an external url (apache server). I'm also using ssl.
Now when I try to do a POST request on the server-side to pre-render my app, I get back a response with status: 0, url: null (I'm assuming this means the connection was refused).
An example non-working url would be https://mywebsite.com/api/get-info.
What really stumps me is that when the app loads on the client, all HTTPS requests start working. So the problem is I cannot get the express server to send POST requests to my external url.
I've tested a post request on the server-side to a different website (twitter), and that seems to work fine as well. So i'm not entirely sure where I've gone wrong.
I already have CORS set to '*' as well.
Try using
http://localhost:8000/api/get-info
in production as well. Since your Angular app is rendered on the same server as your API is running, using localhost should just work fine. It doesn't matter if you are on an external URL.
I do something similar (its a GET but that shouldn't matter) with my translations:
if ( this.isServer ) {
translateLoader.setUrl( 'http://localhost:4000/assets/localization/' );
} else {
translateLoader.setUrl( 'assets/localization/' );
}
It works locally and in production (both server and client).
I just encountered this problem myself for two days. Please take a look at my comment on https://github.com/angular/universal/issues/856#issuecomment-426254727.
Basically what I did was I did a conditional check in Angular to see if the APP is running in browser or in server (rendered by Angular Universal), and change my API endpoint to actual IP in https or localhost in http accordingly. Also in my Nginx setting, I only redirect incoming request from browser to https by checking if the server_name is localhost.
Hope it helps!

Socket.io + Express CORS Error on localhost (not allowed by Access-Control-Allow-Origin)

I have a working node.js Express server to which I would to add socket.io support (allow javascript clients to connect via socket.io). I can connect to the express server via a Javascript $.get(), but the socket.io.connect() command fails due to a CORS error.
My testing machine is OSX with Apache to serve the client, thus port 80 is taken, so I have node.js/express running on port 8888. I added socket.io per the documentation:
var exp = express();
var server = require('http').createServer(api.server);
exp.listen(8888);
var io = require('socket.io').listen(server);
io.sockets.on('connection', function(socket) {
console.log('connection');
});
I properly see "info: socket.io started" in my node.js logs.
Then, on the client, I attempt to connect to the server...
this.socket = io.connect('http://localhost:8888');
this.socket.on('connect',function() {
socket.emit('install','test');
});
However, I'm getting a CORS error in the console in Chrome:
XMLHttpRequest cannot load http://localhost:8888/socket.io/1/?t=1358715637192. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
HOWEVER, THIS works fine!
$.get('http://localhost:8888',function(e,d){
console.log(e,d);
});
So I double checked my headers, for both localhost:8888 and localhost -- both are properly returning the headers which (should) allow for the cross-domain requests...
Access-Control-Allow-Origin: *
Any ideas?
CORS is a very tricking thing to get working (or at least it was for me). I recommend this resource here: http://enable-cors.org/
Following what they do very carefully helped me. I also found that different browsers gave different visibility over the CORS request/responses which helped.
I found that Chrome was easier to get working than firefox, but firefoxes tools such as firebug, were quite nice to work with.
My gut feel from your information is that you might need your request to have an X-Request-With in your request attributes.
I also found using fidler to send the http requests allowed me to narrow my problems down to the server side initially and get that working. You will find browser enforce CORS, but something like fidler doesn't and thus provides another way of inspecting what is happening.
I definately recommend trying to break the problem in half so that you can see if it is server side or client side that is not behaving how you expect.
My problem was related to returning the same CORS response for the OPTIONS header as the POST or GET. That was wrong. Chrome allowed it. Firefox didnt. Any options request that is sent out will be sent out once, then in the future it will be cached and not resent (Which caused alot of confusion for me initially). For the options request you just need a standard response saying its ok to proceed, then in the post or get response i believe you want your cors responses there only.

drupal - node.js integration

For a few days we'r trying to integrate drupal with node.js. but we couldn't connect with socket.io.js..
we're getting this error message from chrome console;
XMLHttpRequest cannot load http://mydomainname.com:8080/socket.io/1/?t=1340201859161. Origin http://mydomainname.com is not allowed by Access-Control-Allow-Origin.
and our backend settings are;
/**
* This configuration file was built using the 'Node.js server configuration builder'.
* For a more fully commented example see the file nodejs.config.js.example in the root of this module
*/
backendSettings = {
"scheme":"http",
"host":"mydomainname",
"port":8080,
"key":"/path/to/key/file",
"cert":"/path/to/cert/file",
"resource":"/sites/all/modules/nodejs/node_modules/socket.io/lib",
"publishUrl":"publish",
"serviceKey":"",
"backend":{
"port":80,
"host":"urb5.com",
"messagePath":"realtime"},
"clientsCanWriteToChannels":false,
"clientsCanWriteToClients":false,
"extensions":["nodejs.server.extension.js"],
"debug":true,
"transports":["websocket",
"flashsocket",
"htmlfile",
"xhr-polling",
"jsonp-polling"],
"jsMinification":true,
"jsEtag":true,
"logLevel":1};
and also, in source code we have a script socket.io script,
like
<script type="text/javascript" src="http://mydomainname.com:8080/sites/all/modules/nodejs/node_modules/socket.io/lib/socket.io.js"></script>
this scripts build number is 0.9.6, but if we follow this path in ftp, there is a socket.io.js but its build number is 0.9.5
any suggestions?,
thanks..
The problem here, is that you are trying to load up socket.io from the server, but your front-end files are located in another domain space / server.
There is security regulations that does not allows cross-domain ajax and resources requests if they are not enabled by server.
So on server side where socket.io.js is coming from, you should add in page header something like this:
Access-Control-Allow-Origin: http://hello-world.example
Access-Control-Max-Age: 3628800
Access-Control-Allow-Methods: PUT, DELETE
This will allow you to share resource content with specified domain. And browser will not throw Access-Control-Allow-Origin error anymore.
As well, why you are trying to include js file through port 8080? If this is port that you bind your socket.io listener, then this is wrong, and you need to get js file through usual port (in most cases without defining, or 80).

Resources