Node - Unable to Verify the First Certificate / UNABLE_TO_VERIFY_LEAF_SIGNATURE localhost - node.js

I have an ASP.NET Core 3.1 web app that I run on my local development machine. This app successfully runs. I can also successfully execute requests to it via Postman. I'm trying to run a test from a Node.js app. This app is using Axios to try to load one of the web pages. The request looks like this:
const result = await axios.get('https://localhost:5001/');
When this request runs, I receive the following error:
Error: unable to verify the first certificate
...
code: 'UNABLE_TO_VERIFY_LEAF_SIGNATURE',
...
The fact that I can a) load the url in my browser and b) run the request from Postman leads me to believe there is a config issue with my Node app. I don't know if it's an issue with a) my axios request or b) some app configuration. Oddly, I receive the same error if I try to execute my request against http://localhost:5000/ (i.e. not over HTTPS).
I'm unsure how to resolve this issue though. How do I execute a request via Axios against a web app running on localhost?

You'll need to tell axios/node what signing authorities to trust (your browser and postman will already have several of those set up)
You do that by configuring the https agent in axios - have a look at this answer for an example : How to configure axios to use SSL certificate?
And here are instructions on how to get the bundle from the browser (you'll probably need to use a p7b/pfx or get all certs in the chain): https://medium.com/#menakajain/export-download-ssl-certificate-from-server-site-url-bcfc41ea46a2

Related

Connection working from React to NodeJS, but request-url is incorrect in Chrome Network

enter image description hereenter image description hereenter image description here
Assalamu ‘Alaykum
my React app is running on localhost:3000
NodeJS server is running on localhost:1000
I'm sending request to server 'localhost:1000' and everything is fine, correct response is coming from server, there is no error in Console, but in Chrome Network request-url is to localhost:3000/.../...
if I sent wrong data to server, it's coming correct error and bad request error in Console
can someone help me,
thanks
It sounds like your React app is making requests to the wrong URL. Based on the information you provided, it appears that your React app is running on localhost:3000 and your Node.js server is running on localhost:1000, but your requests are being sent to localhost:3000.
To fix this issue, you will need to update your React app to send requests to the correct URL, which should be http://localhost:1000/auth/sign/in. This can typically be done by updating the base URL or endpoint for your API requests in your React app.
For example, if you are using the fetch API to make requests in your React app, you can update the base URL for your requests by setting the baseURL property in your fetch options:
fetch('/auth/sign/in', {
baseURL: 'http://localhost:1000',
// Other fetch options
})
Or, if you are using a library such as Axios to make requests in your React app, you can update the base URL for your requests by setting the baseURL property in the Axios configuration:
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:1000';
After updating the base URL for your API requests, your React app should send requests to the correct URL, http://localhost:1000/auth/sign/in, and you should no longer see requests being sent to localhost:3000 in the Chrome Network tab.
It's worth noting that the exact solution for updating the base URL for your API requests will depend on the specific details of your React app and how you are making requests to your server. If you are having trouble updating the base URL, you may want to consult the documentation for the specific library or API you are using.

Angular with node.js http failure response for unknown url ): 0 unknown error

So let's start with little info in the beginning.
I have nodejs server side app and client app on angular. I send only get requsts to server app just to read data from database. When i started my apps on local machine they were working pretty well. But when i deployed them to server i got such error : (below in screen)
screen with error from angular
So, i added cors support in server app and add Allow Headers. code in nodejs
But it doesn`t help. When i post "GET" request i get my allow headers in response header and my data that i need in body.
screen with response headers in postman
screen with response body in postman
Server - apache. One interesting thing that server app works good with http protocol and when i am using htttps get this errror error with https
But angular works on https.

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!

ReactJS sent GET request, responded with 302 redirect, received CORS error

This is my stack:
Frontend server: Node + ReactJS (f.com)
Backend server (API): Golang (b.com)
I'm doing this in development environment where I use create-react-app to run my frontend server via npm start command. I want to perform authentication using SSO served at sso.example.com/login. Ideally whenever there's a request to the Backend server without proper authorization, it will be responded with HTTP 302 Redirect to the SSO page. So the sequence is:
ReactJS sends GET request to b.com/users
Golang responded with http.Redirect("sso.example.com/login")
ReactJS app gets CORS error from sso.example.com of which I don't have control of adding Access-Control-Allow-Origin:* respond header
How can I redirect my GET request successfully?
In your case, it would be easier to do the redirection in browser on the client side, so you won't have CORS issues (because you are accessing it from the SSO website url directly).
You can either do it with react, which is complicated: Programmatically navigate using react router V4
Or do it with window with plain JavaScript, which is easy but might cause problems with browsing history:
window.location.href = "https://www.example.com";
https://appendto.com/2016/04/javascript-redirect-how-to-redirect-a-web-page-with-javascript/

request to nodejs proxy: Provisional headers are shown

In my web app project, I came across a cross domain issue. The back-end API was deployed to the server, which providing the IP and port(We can assume the back-end API works well). And I am working on the front-end side, and still in the local development stage. So there is cross domain issue.
so I used a nodejs proxy and try to overcome the cross domain issue. For the nodejs proxy part, I am not the expert on that. Just get it from my teammates, who meet the same issue before.
So in my client side js code, I use axios library to send http request to the nodejs proxy as following:
axios.get('http://127.0.0.1:8888/service/delete/v1?id=5').then((response) => {
console.log(response);
}).catch((error) => {
console.log(error);
});
And the nodejs proxy will replace the 127.0.0.1:8888 part with the real API's IP and port, and send the request. That's my understanding about it.
so I run the nodejs proxy, which is listening on port 8888, and run my frond-end code in another console. But when I send the above mentioned request. I got the error as following:
GET http://127.0.0.1:8888/service/delete/v1?id=5 net::ERR_CONNECTION_TIMED_OUT
Error: Network Error
at createError (createError.js?f777:16)
at XMLHttpRequest.handleError (xhr.js?14ed:87)
and I debug the error deeper in the chrome devtool, and find the Provisional headers are shown in the header as following
I searched some previous article about this issue.It's said that the potential reason is the request is blocked.
But I can send other HTTP request successfully to other third party APIs. For example my mock data service Mockarro as following:
const key = 'mykeyxxx';
const url = `http://www.mockaroo.com/api/generate.json?schema=firstapis&key=${key}`;
axios.get(url).then((response) => {
console.log(response);
});
So my the previous request is blocked. I am very confused. My guess is the issue is from the nodejs proxy part? Right?

Resources