Vue Js public Websocket blocked by CORS policy - node.js

I've created a application with Vue and Node js but I get a trouble "CORS" when I try to connect to a public websocket from "http://localhost".
Project structure
Error log
I believe the cause of this problem is a trying to connect via http to a https server.
Any idea to solve this problem in localhost ?

Try installing this node package named cors-server that will start a web server on a given port that will proxy any request received and add CORS headers to it.
To start the server simply call it from the command line and supply a port number
cors-server <port>
After that, any requests sent to http://localhost:[port] will have Access-Control-Allow-Origin: * on the response.
e.g:
POST http://localhost:3005/http://www.google.com
Hope this helps!.

The real problem in this case, is to try to connect to other domain from the client side and the server do not allow "Access-Control-Allow-Origin".
The best solution for this question is follow the arquiteture of project bellow:
https://github.com/Tucsky/SignificantTrades
In resume, implement conection websocket in server side and expose a local websocket in the client side.
In my case, Node and Vue js.

Related

Error connecting to socket.io server, changed code from websocket to socket.io

I'm currently using websocket library on both nodejs backend and JS client.
I'm trying to change to socket.io, I managed to write the code for both sides however I'm unable to connect to the server from my client.
On the console of my browser I see the error and realised that the address is being changed by the socketio library.
websocket: wss://domain.com/asset-ws/ ==> works fine
socketio: auto changes the url to wss://domain.com/socket.io/?EIO=4&transport=websocket
The error: WebSocket connection to 'wss://domain.com/socket.io/?IO=4&transport=websocket' failed.
Is it something to do with my nginx config?
Any help would be much appreciated.
Thank you
By default socket.io url adds the /socket.io path.
In my Nginx config I'm already using a custom path add, so I just specified a path on the io server config, like so:
const io = new Server(server, {
path: '/'
});
This way the default path would be overwritten.

Get Websocket URL from Node js

I am trying to build a simple WebSockets app with node.js as a server. In order to create a WebSocket connection I write:
const url = 'ws://localhost:8080'
const connection = new WebSocket(url)
But I do not want to hardcode the URL. Can I receive it from my server?
Available options:
Using of Webpack/Rollup/Snowpack - https://dev.to/sanfra1407/how-to-use-env-file-in-javascript-applications-with-webpack-18df:
You can define a some .env and define address of server
Use dotenv or something another library on backend side to receive variable
Use Webpack/Rollup/Snowpack on frontend side to build frontend with defined address of server
It will allow to change address of server in one place
SSR (server-side rendering) - https://medium.com/jspoint/a-beginners-guide-to-react-server-side-rendering-ssr-bf3853841d55
You can provide address of server from backend to frontend

Issue accessing my loopback API on Heroku

I have created a fullstack app - Loopback is being used as the backend API and React as frontend app.
I was expecting to host my app on Heroku. I can successfully start the app (hosted on port 3000) and the client React is correctly displayed. However, when I try to send request to the API using this url http://localhost:3000/api/, I receive this error message :
DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
Any ideas?
Thanks-
Your app won't be running on port 3000 when it's deployed to Heroku - you need to use the random port that it's assigned. Also, your React front end should then use .herokuapp.com instead of localhost:3000. The React code is running on the client computer so it needs to make the request over the internet.
Because Heroku generate random port number, it's necessary to create 2 app: front end client and back end API.

Socket.io failing to connect because of nsp

I have a problem with socket.io#^1.0. The setup is fine because it works locally, the server is correctly configured and when i try to connect to the server from my Angular APP it works fine with this:
io.connect("localhost:8080");
The connection is established and i can send and receive event. Now in the production environment, "locahost:8080" is replaced with the address of the server Launched:
io.connect("https://domain-name.com/api");
I know that the problem here is the /api, since socket.io is considering it as a namespace and it's trying to connect to it, in my network console I see 500 Internal server error with the address https://domain-name.com without the /api when i replace the request url to add the /api I get a 200 OK with type octet-stream.
So the question here is: how do I connect to the correct path without consideration of the namespace?
Thanks in advance for any help :)
I think you want to use the path option (documented here):
// client
var socket = io.connect('https://domain-name.com/', {
path : '/api/socket.io'
});

Error binding socket on heroku , not sure about using express

this is my first node.js and socket.io application , i didn't use express ,I want to deploy the application on heroku do i need to use it ? i mean i just did npm install socket.io on localhost and in my server file i.e game.js i have io = require("socket.io") and socket = io.listen(Number(process.env.PORT)) only and in one of the files where from where i am sending the message i have socket = io.connect();
so please tell me if i need to use express and how show i modify my existing application ?
I have given the link to the source of application
( https://github.com/bitgeeky/herokutest )
Although the Application works fine on localhost by changing the port no , to some port no like (8000) but Heroku error log on doing "heroku open" is http://pastebin.com/MtB0z5vQ
I noticed that you haven't created a http server. I am assuming that you are creating a web application, since you are deploying to heroku. For that, you need to create a http server in nodejs.
Go through socket.io https://github.com/LearnBoost/socket.io
Also http://socket.io/#how-to-use
This should get you started
Note: You do not need express. But it will make your work easier in many ways. Depends on the type of application that you want to create.

Resources