How to use gulp-webserver proxies property? - javascript

I have a little issue with understanding of proxies of gulp-webserver package.
I need to proxy my localhost 8080 to make it accessible from the outside. But I don't quite understand how I can do it with gulp-webserver proxies property.
Here I have my piece of code:
gulp.task('server', function(){
gulp.src('dist')
.pipe(webserver({
livereload: true,
open:true,
port:8080,
proxies:[
{
source:'/hello',
target:'http://localhost:8080/hello'
}
]
}));
});
So such proxy has to give acces by simply entering the address http://localhost:8080/hello in any browser?
For what reasons this "proxies" is using?
How can I make my localhost accessible from outside with gulp?

Just answer one of you question and you should understand the rest.
To use a proxy in this development environment setup is to get around the CORS (google it). Your ajax call can not simply make a call to another domain / server address; you can actually, but your browser security policy will stop you from doing it, there are ways to get around it. And while you are developing. Most likely you have a http://localhost domain name. And the actual end point is sitting else where.
So for example in your ajax call
$http.post('/api', data);
You are actually making calls to http://localhost/api
Which doesn't exist (unless you have a full backend running). So for example you have a real backend running from http://real.com/api. By setting up the proxy with your gulp setup.
whenever you point to /api it will go out to http://real.com/api to fetch the data for you.
If you want to access the development outside your local machine. All you have to do is to set the gulp-webserver host to 0.0.0.0 then from the outside you need to find out your machine address (for example 192.168.0.1)
And from your browser on the other machine just type http://192.168.0.1:3000 (the 3000 is the property of the port) and you should able to see your local machine serving up the content.

Related

Axios GET request returning ECONNRESET for some URLs

I am working on an application that uses an express server to reach out to an API to fetch data. In our organisation outbound traffic requires a proxy which I have supplier to axios like below (not the real one):
let response = await axios.get(endpointUrl, {
proxy: {
host: "123.45.678.90",
port: 0000,
},
})
Passing various URLs into the axios get function returns varied results, with the following URLs returning a result:
https://www.boredapi.com/api/activity
https://api.ipify.org?format=json
https://jsonplaceholder.typicode.com/todos/1
Whereas the following URLs are returning an ECONNRESET error almost instantly:
https://api.publicapis.org/entries
https://randomuser.me/api/
https://reqres.in/api/users
I can't see any pattern between the URLs that are/are not working so wondered if a fresh set of eyes could spot the trait in them? It's important to note that all these URLs return successfully in the browser, just through this axios call being the problem.
To add to the mystery, the URLs that do work work on my machine, do work on a machine outside our organisation - so potentially a clue there?
Any help/guidance of course would be appreciated, thank you.
This error simply means that the other party closed the connection in a way that was probably not normal (or perhaps in a hurry).
For example, a socket connection may be closed by the other party abruptly for various reasons or you may have lost your wifi signal while running your application. You will then see this error/exception on your end.
What could also be the case: at random times, the other side is overloaded and simply kills the connection as a result. If that's the case, depends on what you're connecting to exactly…
Solution - This is happening because you are not listening to/handling the 'error' event. To fix this, you need to implement a listener that can handle such errors.
If the URL that work on your machine also work outside your organization and the other don't, it is most likely a problem with your proxy.
Some proxies might have configurations that makes them remove headers or change the request in a way that the target does not receive it as intended.
I also encountered a problem with axios and proxies once. I had to switch libs to make it work. To be sure, I would recommand using a lib like "request" (deprecated) juste to make sure it is not a problem with axios. There are multiple open issues on the axios repository for proxy issues.
ECONNRESET is likely occurring either because the proxy runs into some sort of error and drops the connection or the target host finds something wrong with the incoming connection and decides to immediately drop it.
That target host may either be finding a problem because of the proxy or it may be expecting something in the request that it finds is missing.
Since you have evidence that all the requests work fine when running from a different location (not through your proxy) and I can confirm that your code works fine from my location (also not running through your proxy), it definitely seems like the evidence points at your proxy as causing some problem in some requests.
One way to debug proxy issues like this is to run a request through the proxy that ends up going to some server you can debug on and see exactly what the proxy has done to the incoming request, compared to a request to that same host that doesn't go through the proxy. That will hopefully highlight some difference that you can then test to see if that's causing the problem and then eventually work on the configuration of the proxy to correct.

Django/React app API in production vs development?

So I have made a React app that uses Axios to fetch api's. During development, I would have an api call to 127.0.0.1. However, my ReactApp resided on localhost:3000. Therefore, it development, I can't just use:
axios.get('/api/'),
In dev I would need to use:
axios.get('127.0.0.1/api/'),
Anybody have any good ideas on how to resolve this conflict so I can see some data in dev? Kinda tough to design an UI without any data to populate it. Kinda like buying a shirt without trying it on first (which, I never try anything on, so this is a horrible analogy.)
Use it as in the first example. Because it is relative, it will resolve fine for different hosts:
axios.get('/api')
Will automatically resolve to:
// if called by https://example.com/index.js for example
"https://example.com/api"
// if called by localhost/index.js
"https(s)://localhost/api"
In your second example, if you prepend the host and port, you will get duplication!
For example, I just tried your first example on my localhost:3000 and the result is
GET http://localhost:3000/api 404 (Not Found)
Which makes sense because I don't have a /api. But did you notice it appended /api correctly after my host and port?
Now your second example:
GET http://localhost:3000/127.0.0.1/api 404 (Not Found)
It duplicates the host and port. In your case it would be 127.0.0.1:3000/127.0.0.1/api
Just use the first example and it will resolve fine for different hosts (and ports) because it's relative! Did you try it out?

How to use trello webhook callbackURL pointing to localhost in php codeigniter?

I have created a web-based system in codeigniter and some trello integration using its API services. I wanted to achieve something like if there is a new card created in a particular board it will also send a notification in my system that a new card is created. I started reading some documentation in trello webhooks but I just can't figure it out. Am I heading in the right way? Would it be valid if I provide a callbackURL pointing in localhost callbackURL: "localhost/main_controller/trelloCallback" ? However the code below returns a 400 status. Please help me. Thank you.
Javascript
$.post("https://api.trello.com/1/tokens/5db4c9fbb5b2kaf8420771072b203616f3874fa92a4c57f0c796cf90819fa05c/webhooks?key=a2a93deccc7064dek5f4011c2e9810d6", {
description: "My first webhook",
callbackURL: "localhost/dti_infosys/main_controller/trelloCallback",
idModel: "5a73c33ad9a2dk1b473612eb",
});
main_controller/trelloCallback
function trelloCallback() {
$json = file_get_contents('php://input');
$action = json_decode($json,true);
var_dump($action);
}
I know it's an old question, but this use case of having an external tool access our localhost for development is quite common.
So for anyone (OP included) that would like a cloud based service to be able to call a local endpoint, you can use tools like ngrok.
Basically, it sets up a URL accessible via internet that forwards all calls to one of your local ports.
Let's say that your local webserver running your PHP listens on the port 8000 on your machine.
With ngrok installed, you could execute the following command:
$> ngrok http 8000
That would set up the forwarding session:
ngrok by #inconshreveable
Session Status online
Session Expires 6 hours, 21 minutes
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://b5d44737.ngrok.io -> http://localhost:8000
Forwarding https://b5d44737.ngrok.io -> http://localhost:8000
You can then use any of the Forwarding addresses pointing to ngrok.io to access your local webserver through internet, meaning that if you were to provide an URL using any of these addresses instead of localhost to an external tool, it would be able to indirectly call your local endpoint.
In your case, your javascript call to create a Trello webhook would be:
$.post("https://api.trello.com/1/tokens/<YOUR_ACCESS_TOKEN>/webhooks?key=<YOUR_API_KEY>", {
description: "My first webhook",
callbackURL: "https://b5d44737.ngrok.io/dti_infosys/main_controller/trelloCallback",
idModel: "<YOUR_MODEL_ID>",
});
A bit of warning though: In the case of ngrok, the Forwarding URLs are randomized at each session startup, meaning that the webhooks you created on one session would not work an another session because there callbacksUrl wouldn't be valid anymore.
Note that you can subscribe to a paid plan to "reserve" ngrok subdomains and have URL consistency between sessions. Or you could manually update your webhooks callbackUrls with the new forarding URLs.
Anyway, I hope this will help!
P.S.: When the forwarding session runs, you can access localhost:4040 to inspect calls made on the forwarding URLs and retry some of them.

Determine if Request is Local in Node.js app

I am learning Node.js. While creating a web site, I will run the web site locally (on localhost). When it is deployed, it will run on other servers. My question is, how do I determine if a request is from localhost or not in Node? In ASP.NET, I could use Request.IsLocal. I'm trying to figure out how to do that in Node.
Thank you!
There's server.address() to get the server address.
And request has connection and socket objects, as both might hold remote address (in a remoteAddress property) depending on a type of current connection.
But if the server is behind a reverse proxy, you'll have to pull it from appropriate header, most likely x-forwarded-for. However I'm not sure if that holds if proxies are chained.
So, to conclude, you'd do something along the lines of:
function cliAddress(req) {
return req.connection.remoteAddress || req.socket.remoteAddress || req.headers['x-forwarded-for'];
}
server.isLocal = function(request) {
return server.address() === cliAddress(req);
}
And if you use express.js see Express.js Req.IP API.

use javascript to test if server is reachable

I have a javascript application that loads data asynchronously from a server within my company's firewall. We sometimes need to show this application outside of the firewall but it is not always possible to get on the VPN. For this reason, we configured the firewall to allow public requests for this data on a specific port. The catch: when I am inside the corporate network, I can only load data using the server's DNS name due to a peculiar configuration of the firewall. Outside of the corp network, I have to use the server's public IP address..
Currently we distribute two versions of the javascript application -- one which works within the firewall and one that works outside of it. We would like to distribute one app -- one that tests the URLs and then, depending on which is reachable, continue to use that address to load data.
I have been using jQuery's $.ajax() call to load the data and I noticed there is a timeout parameter. I thought I could use a short timeout to determine which server is unreachable.. However, this "countdown" doesn't seem to start until the initial connection to the server is made.
Any thoughts on how to determine, in javascript, which of two servers is reachable?
Use the error event:
$.ajax({
url: dnsUrl,
success: ... // Normal operation
error: function () {
$.ajax({
url: ipUrl,
success: ... // Normal operation
});
}
});
You may put some dummy-images on the server and try to load them. the onload-event of the image that was successfully loaded should fire.

Categories