So I have a very simple API call using fetch on my frontend to http://localhost:3001/test that gives me an error: Error: connect ECONNREFUSED ::1:3001
However, when I call that API directly (enter the api uri directly into my browser), it works just fine. Also when I change localhost to http://127.0.0.1:3001/test on my frontend fetch call, that works too.
This seems like it's gotta be a network error since ::1 and 127.0.0.1 resolve to the same address but one is IPv4 and the other is IPv6 right? Anyone have any thoughts on why this could be?
frontend fetch (BACKEND_URL = http://localhost:3001):
export async function getStaticProps() {
const res = await fetch(`${BACKEND_URL}/explore`, {
method: 'GET',
headers: {
"Content-Type": 'application/json',
Origin: BASE_URL,
},
});
...
}
Backend Server listening on port 3001 (PORT = 3001):
const PORT = process.env.PORT;
app.listen(PORT, '0.0.0.0', () => {
console.log(`Server is running on port ${PORT}`);
});
Stack: NextJS frontend, ExpressJS backend, MongoDB Atlas DB, NextAuth for auth
A couple of things can be the issue:
You need to enclose the IPv6 address between brackets, like http://[::1]:3001/test
The service is only listening on the IPv4 address and not on the IPv6 address. Depending on the server you may need to configure the listening address differently
Your post doesn’t contain enough information to go into more detail. Please edit your post to include the actual code, service and configuration so we can help you further.
When you use "localhost" in the backend URL, that is by default going to be resolved to the IPv6 address ::1. However, looking at the backend server code, that backend is listening on 0.0.0.0 which is IPv4.
You need to make that backend listen on IPv6:
const PORT = process.env.PORT;
app.listen(PORT, '::', () => {
console.log(`Server is running on port ${PORT}`);
});
Related
I am trying to connect to my API, hosted on a remote VPS, via Postman but can't seem to find any definitive guides on how to do it.
The VPS has a frontend app (Vue) that connects to Express using Nginx reverse proxy. That works fine.
However, I want to share some of the Express API with another client not hosted on the same server. For example, connecting from Postman with user authentication to just share data in JSON format.
If anyone can give me any advice on how to achieve this I would much appreciate it.
EDIT
Here is an example request I am trying from Postman. Express is confirmed running on 3001 on the VPS.
http://vps-url:3001/test
This is the corresponding route in Express
app.get("/test", (req,res)=>{
res.json({ msg: 'Hello from VPS!' })
})
When I try to access in Postman, is just hangs.
I have also this CORS config to allow connection from my local machine using my public IP.
app.use((req, res, next) => {
const corsWhitelist = [
'http://vps-url.com',
'https://anotherclient',
'70.80.xxx.xxx' // my machine IP
];
if (corsWhitelist.indexOf(req.headers.origin) !== -1) {
res.header('Access-Control-Allow-Origin', req.headers.origin);
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
}
next();
});
I'm running my node server on 3000 port and peer server on port 3001.In this scenario its working properly.But when deployed over heroku i'm running my server at 3000 and peer server over 443. In this scenario peerjs not wroking. It might be port alloction issue i guess but i'm unable to find the issue.
peer.js
const myPeer = new Peer( {
secure:true,
host: 'my-app-name.herokuapp.com',
port: 443
})
server.js
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => console.log(`Server running on port ${PORT}`));
github link to project : link
New to Heroku. Any help will be appreciated!
Add this to your server file:
var ExpressPeerServer = require("peer").ExpressPeerServer;
var options = {
debug: true,
allow_discovery: true,
};
let peerServer = ExpressPeerServer(server, options);
app.use("/peerjs", peerServer);
And call on client side like this:
var peer = new Peer({
host: "yoursite.herokuapp.com",
port: "",
path: "/peerjs",
});
You Have to Host Two Apps on Heroku. First Your Main App and Second Your PeerJS Server. Because You Cannot Host your App On different Port (i.e. https://your-app-name.herokuapp.com:5000). And Then You can Connect Your Main App PeerJS Client With Your PeerJS Server by using this.
const myPeer = new Peer( {
secure:true,
host: 'my-peerjs-server-name.herokuapp.com',
port: 443
})
Happy Coding!
Just use this Heroku Element to deploy your own peer server with zero configuration. Connect to it from your client providing the host attribute as the url of your Heroku app without the https:// part and you may need to also set secure to true.
{
host: "you_app_name.herokuapp.com", // exclude protocol
secure: true
}
add this in server(index,app) file
const { ExpressPeerServer } = require("peer")
const peerServer = ExpressPeerServer(server, {
debug: true
})
app.use("/peerjs", peerServer);
and in client side add this
const myPeer = new Peer(undefined, {
path: "/peerjs",
host: "/",
port: "443",
})
port should same as your server.listen(port)
This will give invalid frame header for socket io but its fine
I saw several posts on the subject but without result. I have on the one hand a form which collects information (name, first name etc) then saves it in database (mongodb). Everything works when I use postman to send my information via the route / signup, i can see my new user in mongodb. but when i'm starting the app on Expo he throw me "Network request failed".
Frontend fetch :
submitForm = () => {
var signupData = JSON.stringify({
first_name: this.state.firstName,
last_name: this.state.lastName,
email: this.state.email,
password: this.state.password
});
fetch(`https://localhost:3000/signup`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: signupData
})
.then(response => {
console.log(response);
return response.json();
})
.then(data => {
if (data.result) {
this.props.handleUserValid(
this.state.firstName,
this.state.lastName,
this.state.email,
data.user.token
);
this.props.navigation.navigate("Account");
}
})
.catch(error => {
console.error(error);
});
};
And Backend route :
router.post("/signup", function(req, res, next) {
var salt = uid2(32);
console.log("Signup is running...");
const newUser = new userModel({
first_name: req.body.first_name,
last_name: req.body.last_name,
email: req.body.email,
password: SHA256(req.body.password + salt).toString(encBase64),
token: uid2(32),
salt: salt
});
newUser.save(function(error, user) {
console.log("LOG: user", user);
res.json({ result: true, user });
});
});
module.exports = router;
And here is a screenshot of the error
Again when using Postman, the fetch is working good, my console log is printed and the user added to my data base.
Thanks for the help.
-- EDIT --
I launched the application in a web browser via Expo and everything works perfectly. My sign in / sign up pages and my account page. But on my phone it's not working (IOS), it's a network problem from my phone (maybe a certificate problem, wrong IP ?)
if you have an idea i'm interested, i've been stuck on it for 2 days
Had the same issue with React-native Expo and Python Django back-end.
The problem is about a conflict between an emulator localhost and server localhost.
Your back-end-server might be ruunning on 127.0.0.1:8000, but an emulator can't find this.
In terminal find your Ipv4-Address with a command 'ipconfig'.
For ex., it will be 192.138.1.40
After this put it into your fetch (
'http://192.138.1.40:8000/').
And what is also important - run your back-end-server with the same host and port.
On python Django for example:
py manage.py runserver 192.138.1.40:8000
On Django you will also need to add ALLOWED_HOSTS = ['192.138.1.40'] in settings.py
Instead of 'localhost', while using expo, use your device's (computer's) IP address (http://192.168.x.x:3000/'signup'). This method worked for me. Make sure that your PC and mobile are connected to the same network. Type ipconfig/all in the command prompt to find IP address.
Update:
Seems like this was my problem coupled with my roommates hogging the wifi bandwidth. Slow internet connection may also be a problem. ATB with your problem.
I had the same issue with Expo: fetch error. For my backend. I use json-server to mock API data. In my case, the json-server runs on http://localhost:3000/playlist
Instead of fetch("http://localhost:3000/playlist"), I did fetch(http://10.0.2.2:3000/playlist), then it worked. Using the Android emulator, it could not find the server's address.
For the reason why using 10.0.2.2, check here. why do we use 10.0.2.2 to connect to local web server instead of using computer ip address in android client
I had the same issue - what worked for me was to:
Run my local server on host 0.0.0.0
Go to network preferences and find my LAN IP address (e.g. 192.168.1.1)
Replace the host in my url in the mobile app with the LAN IP (e.g. http://192.168.1.1:3000/signup)
Reload and test
For anyone using Serverless, I used this command to run on 0.0.0.0
ENV=local serverless offline -s local -o 0.0.0.0
I had a similar issue. Apparently, the emulator does not understand or see 'localhost' as host.
What I did:
run ipconfig on your cmd, copy the ipv4 address, then use that to replace 'localhost' for your server host.
you should check the URL
https://localhost:3000/signup (X)
http://localhost:3000/signup (O)
NOT HTTPS
If anyone facing this issue with a hosted backend server this is for your knowledge.
Used react native expo cli
Backend(Spring Boot) hosted on a Azure server ( Eg URL : https://abcd-spring-app.azurewebsites.net). HTTPS used.
But still I faced the below issue.
Network request failed at node_modules\whatwg-fetch\dist\fetch.umd.js:535:17 in setTimeout$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:383:16 in callTimers
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
After some research I found that this is because the slow response time of the server. The network request failed due to the timeout.
So Before testing your app with the backend server, send some requests from the web(or any other way) and up your server. Because some servers get inactive after some time. Make sure you have a good connection.
Working on socket.io for the first time and trying to get it up and going, I can make the request and I have the server up and going, here is the server in node.
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
app.get("/",function (req,res){
res.send("Hello you socket loving bastard!");
});
io.on('connection', socket => {
console.log('user connection', socket);
io.emit('You got someone!', {user: "me"});
});
io.on('close', socket => {
console.log(socket);
});
http.listen(9090, () => {
console.log("Node starting on 9090 for websockets!")
});
Using vue-native-websocket I have this ...
Vue.use(Socket, 'ws://localhost:9090/', {
reconnection: true,
reconnectionAttempts: 5,
reconnectionDelay: 1500
});
The console in the browser says:
build.js?b408:1 WebSocket connection to 'ws://localhost:9090/' failed: Connection closed before receiving a handshake response
The server says nothing in the console at all, however, it will serve the get request
Well... the issue is that I'm using vue-native-websocket Socket.io is NOT a native websocket handler and adds extra header information which was lacking apparently. I switches to just using ws in node and it works fine.
From the Socket.io docs.
Socket.IO is NOT a WebSocket implementation. Although Socket.IO indeed uses WebSocket as a transport when possible, it adds some metadata to each packet: the packet type, the namespace and the packet id when a message acknowledgement is needed. That is why a WebSocket client will not be able to successfully connect to a Socket.IO server, and a Socket.IO client will not be able to connect to a WebSocket server either.
This is a basic app I have got that uses express for setting up routes and and also does some query on a mongo db
If I go to http://localhost:8080/ whatever is in the views/hello.html will be displayed in the browser.
If i go to http://localhost:8080/test 'This is a test Page' will be displayed in the browser.
My question is why do I have to specify the port 8080 in the address? Or put another way how do I display what i want at this address http://localhost/ without specifying the port?
I know I can change the port by changing the value of 8080 here
app.listen(8080);
basic app below:
var express = require('express'),
app = express(),
cons = require('consolidate'),
crypto = require('crypto'),
MongoClient = require('mongodb').MongoClient;
app.engine('html', cons.swig);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');
MongoClient.connect('mongodb://localhost:27017/m101', function(err, db) {
if(err) throw err;
//set up a route to go to the page http://localhost:8080/ to see 'This is a test Page'
app.get('/', function(req, res){
db.collection('hw1_3').findOne(function(err, doc) {
//do stuff here
return res.render('hello', { "name" : decrypted });
});
});
//set up a route to go to the page http://localhost/test to see 'This is a test Page'
app.get('/test', function(req, res){
return res.send('This is a test Page!!', 200);
});
app.listen(8080);
console.log('Express server started on port 8080');
});
The default port for http traffic is 80. If you bind to any port other than 80, you need to specify the port in the URL. app.listen(80) will take care of your problem.
On Unixy systems, root (administrator) access is required to bind to any port less than 1024, so you'll have to run your server like sudo node server.js to get port 80. You should bind to a higher port (like 8080) in this case while developing on your machine.
I'm pretty noob, but I'd say that localhost:8080 displays in place of www.somesite.com. I wouldn't get too wrapped up in the port number. If you deploy it to heroku or something you wont see it.