In my Expo React Native app, I've been trying to fetch data from my Ruby on Rails API but it seems that http connections are not allowed.
All the solutions I've found either add configuration to AndroidManifest.xml in Android and Info.plist in iOS which I can't access, but I'd rather keep development in Expo instead of ejecting. I've tried changing localhost to 127.0.0.1, 10.0.2.2, and my machine's IP as well, but none worked. I've looked at the documentation for configuration with app.json and networking but I can't find anything about configuring App Transport Security within Expo. I'm currently running Expo on android 9.0 Pie.
fetch(`http://localhost:3000/api/v1/trainers`, {
headers: {
Accept: 'application/json',
"Content-Type": "application/json"
},
}).then(res => res.json())
.catch(err => console.log(err));
TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (420454d9-7271-44d5-b…-3a968d130699:48065)
at XMLHttpRequest.dispatchEvent (420454d9-7271-44d5-b…-3a968d130699:53513)
at XMLHttpRequest.setReadyState (420454d9-7271-44d5-b…-3a968d130699:52368)
at XMLHttpRequest.__didCompleteResponse (420454d9-7271-44d5-b…-3a968d130699:52195)
at 420454d9-7271-44d5-b…-3a968d130699:52305
at RCTDeviceEventEmitter.emit (420454d9-7271-44d5-b…-3a968d130699:22482)
at MessageQueue.__callFunction (420454d9-7271-44d5-b…-3a968d130699:22097)
at 420454d9-7271-44d5-b…-3a968d130699:21854
at MessageQueue.__guard (420454d9-7271-44d5-b…-3a968d130699:22051)
at MessageQueue.callFunctionReturnFlushedQueue (420454d9-7271-44d5-b…-3a968d130699:21853)
What domain is your REST api on?
I was having the same problem with fetching from a react native app (running on an emulator) to a node.js/express REST api. I couldn't find a workaround within React.
I found a solution with ngrok (https://ngrok.com). It allows you to expose a specific local domain:port to the outside. With this method I was able to fetch from my app to my REST api.
To be clear, I'm not sure the problem is on React-Native's end. I suspect it was my firewall not allowing the connection to go through. Instead of messing with all of those settings, I simply used ngrok.
I'm trying to figure out where to add the "Access-Control-Allow-Origin" header to my create-react-app dev Server config.
So far I'm adding it to config/webpackDevServer.config.js without much luck.
Any idea on where I could add it?
thanks!
Here is a recipe based on #tlfu 's answer for those that are using react-app-rewired. In this case you'll need to define a root level config-overrides.js file containing the following:
module.exports = {
// Extend/override the dev server configuration used by CRA
// See: https://github.com/timarney/react-app-rewired#extended-configuration-options
devServer: function(configFunction) {
return function(proxy, allowedHost) {
// Create the default config by calling configFunction with the proxy/allowedHost parameters
// Default config: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpackDevServer.config.js
const config = configFunction(proxy, allowedHost);
// Set loose allow origin header to prevent CORS issues
config.headers = {'Access-Control-Allow-Origin': '*'}
return config;
};
},
};
I hit this problem. In my case, I'm doing something a bit unusual. I'm serving up my React app from a Salesforce Visualforce page, so the page is served from the visual.force.com domain. I've wired up the Visualforce page so that I can run the app locally using Webpack Dev Server and a tunnel (ngrok) to proxy the requests from Salesforce through to localhost. When my app tries to load resources from the apps "public" folder I'd get errors like this:
Failed to load https://xxxx.ngrok.io/scss/bootstrap.scss: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://xxxx.visual.force.com' is therefore not allowed access.
I tried adding devServer: {headers: {'Access-Control-Allow-Origin': '*'}} to the webpack.config.dev.js configuration object, but this didn't work. I found that I had to add the following to the webpackDevServer.config.js file instead: headers: {'Access-Control-Allow-Origin': '*'} (note that "headers" is a top level config property, not nested within the "devServer" property). I read where when you run Webpack Dev Server via the Node API, it doesn't read the devServer config object from your webpack config file.
Apologies if I have the wrong end of the stick, but from your question I'm guessing you're using a backend api with react front end. afaik you don't need cors, just add a proxy to your client/frontend package.json:
"proxy": "http://localhost:5000/"
Dan does say this is only for simple cases, but I hope it helps
I have a really strange problem. I have a sails app running on my local machine and want to access this application from another computer within the same network, but I get a timeout.
not that I think that it should be necessary, but I even configured cors in config/cors.js:
allRoutes: true,
origin: '*',
credentials: true,
methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
headers: 'content-type'
My project is pretty empty, I just created a few models/controllers and thats it.
I didn't find anything about this problem in their manual so I guess I must have done something wrong during my project setup. Has anyone an idea on how to fix this?
edit
just to make sure I didn't do something completely wront I just created a new project
sails new foo
cd foo
sails lift
-> http://192.168.1.12:1337
works from localhost, gets a timeout from any other host in the network
I'm actually taking for granted that you already tried to ping your host machine from the other machine and you successfully managed to get a response.
If so, I suggest ngrok package to gain access for other users to your local machine. Ngrok exposes your localhost to the web, and has an NPM wrapper that is simple to install and start:
$ npm install ngrok -g
$ ngrok http 1337
The last command will print in the console the new address that points to localhost:1337
Edit: By the way, I'm pretty sure your problem is about network configurations and not sails configurations.
I'm working on a project using Webpack to package my client side JavaScript and CSS. It launches a server so I can do hot reloading and other neat tricks. So when I'm debugging my application, the webpack server is running at localhost:3000. I am also using nodemon to launch another web server to host my API calls. It obviously can't run on the same port, so I have to launch it on port 3002.
I have set a node environment variable that tells my api what port it should host on. I need to somehow gain access to that same environment variable in my client script so my ajax calls know what port they need to be calling.
Before I started using webpack, I was hosting my api and my client code from the same port and I could just make api calls like this 'controller/action'. Now that I have them hosted in essentially two different domains, I need to tell my api to call a fully qualified url including the port. ie: 'host:port/controller/action'. I understand that I'll also need to configure CORS on my API server as well.
When I push this to production, I will be hosting both client files and API calls from the same domain once again, so I will be able to continue making relative api calls 'controller/action'. So I need to gain access to the environment variables from my client code so I can determine how to form the api calls in Dev verses in Production environments.
Maybe a webpack devServer proxy would be worth pursuing.
devServer: {
...
proxy: {
'*/controller/*': {
target: 'http://localhost:3002'
}
}
The client would remain blissfully unaware of the differences between development/production.
I'm using node.js request.js to reach an api. I'm getting this error
[Error: UNABLE_TO_VERIFY_LEAF_SIGNATURE]
All of my credentials are accurate and valid, and the server's fine. I made the same request with postman.
request({
"url": domain+"/api/orders/originator/"+id,
"method": "GET",
"headers":{
"X-API-VERSION": 1,
"X-API-KEY": key
},
}, function(err, response, body){
console.log(err);
console.log(response);
console.log(body);
});
This code is just running in an executable script ex. node ./run_file.js, Is that why? Does it need to run on a server?
Note: the following is dangerous, and will allow API content to be intercepted and modified between the client and the server.
This also worked
process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0';
It's not an issue with the application, but with the certificate which is signed by an intermediary CA.
If you accept that fact and still want to proceed, add the following to request options:
rejectUnauthorized: false
Full request:
request({
"rejectUnauthorized": false,
"url": domain+"/api/orders/originator/"+id,
"method": "GET",
"headers":{
"X-API-VERSION": 1,
"X-API-KEY": key
},
}, function(err, response, body){
console.log(err);
console.log(response);
console.log(body);
});
The Secure Solution
Rather than turning off security you can add the necessary certificates to the chain. First install ssl-root-cas package from npm:
npm install ssl-root-cas
This package contains many intermediary certificates that browsers trust but node doesn't.
var sslRootCAs = require('ssl-root-cas/latest')
sslRootCAs.inject()
Will add the missing certificates. See here for more info:
https://git.coolaj86.com/coolaj86/ssl-root-cas.js
CoolAJ86's solution is correct and it does not compromise your security like disabling all checks using rejectUnauthorized or NODE_TLS_REJECT_UNAUTHORIZED. Still, you may need to inject an additional CA's certificate explicitly.
I tried first the root CAs included by the ssl-root-cas module:
require('ssl-root-cas/latest')
.inject();
I still ended up with the UNABLE_TO_VERIFY_LEAF_SIGNATURE error. Then I found out who issued the certificate for the web site I was connecting to by the COMODO SSL Analyzer, downloaded the certificate of that authority and tried to add only that one:
require('ssl-root-cas/latest')
.addFile(__dirname + '/comodohigh-assurancesecureserverca.crt');
I ended up with another error: CERT_UNTRUSTED. Finally, I injected the additional root CAs and included "my" (apparently intermediary) CA, which worked:
require('ssl-root-cas/latest')
.inject()
.addFile(__dirname + '/comodohigh-assurancesecureserverca.crt');
For Create React App (where this error occurs too and this question is the #1 Google result), you are probably using HTTPS=true npm start and a proxy (in package.json) which goes to some HTTPS API which itself is self-signed, when in development.
If that's the case, consider changing proxy like this:
"proxy": {
"/api": {
"target": "https://localhost:5001",
"secure": false
}
}
secure decides whether the WebPack proxy checks the certificate chain or not and disabling that ensures the API self-signed certificate is not verified so that you get your data.
It may be very tempting to do rejectUnauthorized: false or process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0'; but don't do it! It exposes you to man in the middle attacks.
The other answers are correct in that the issue lies in the fact that your cert is "signed by an intermediary CA." There is an easy solution to this, one which does not require a third party library like ssl-root-cas or injecting any additional CAs into node.
Most https clients in node support options that allow you to specify a CA per request, which will resolve UNABLE_TO_VERIFY_LEAF_SIGNATURE. Here's a simple example using node's built-int https module.
import https from 'https';
const options = {
host: '<your host>',
defaultPort: 443,
path: '<your path>',
// assuming the bundle file is co-located with this file
ca: readFileSync(__dirname + '/<your bundle file>.ca-bundle'),
headers: {
'content-type': 'application/json',
}
};
https.get(options, res => {
// do whatever you need to do
})
If, however, you can configure the ssl settings in your hosting server, the best solution would be to add the intermediate certificates to your hosting provider. That way the client requester doesn't need to specify a CA, since it's included in the server itself. I personally use namecheap + heroku. The trick for me was to create one .crt file with cat yourcertificate.crt bundle.ca-bundle > server.crt. I then opened up this file and added a newline after the first certificate. You can read more at
https://www.namecheap.com/support/knowledgebase/article.aspx/10050/33/installing-an-ssl-certificate-on-heroku-ssl
You can also try by setting strictSSL to false, like this:
{
url: "https://...",
method: "POST",
headers: {
"Content-Type": "application/json"},
strictSSL: false
}
I had the same issues. I have followed #ThomasReggi and #CoolAJ86 solution and worked well but I'm not satisfied with the solution.
Because "UNABLE_TO_VERIFY_LEAF_SIGNATURE" issue is happened due to certification configuration level.
I accept #thirdender solution but its partial solution.As per the nginx official website, they clearly mentioned certificate should be combination of The server certificate and chained certificates.
Just putting this here in case it helps someone, my case was different and a bit of an odd mix. I was getting this on a request that was accessed via superagent - the problem had nothing to do with certificates (which were setup properly) and all to do with the fact that I was then passing the superagent result through the async module's waterfall callback. To fix: Instead of passing the entire result, just pass result.body through the waterfall's callback.
Following commands worked for me :
> npm config set strict-ssl false
> npm cache clean --force
The problem is that you are attempting to install a module from a repository with a bad or untrusted SSL[Secure Sockets Layer] certificate. Once you clean the cache, this problem will be resolved.You might need to turn it to true later on.
Another approach to solving this securely is to use the following module.
node_extra_ca_certs_mozilla_bundle
This module can work without any code modification by generating a PEM file that includes all root and intermediate certificates trusted by Mozilla. You can use the following environment variable (Works with Nodejs v7.3+),
NODE_EXTRA_CA_CERTS
To generate the PEM file to use with the above environment variable. You can install the module using:
npm install --save node_extra_ca_certs_mozilla_bundle
and then launch your node script with an environment variable.
NODE_EXTRA_CA_CERTS=node_modules/node_extra_ca_certs_mozilla_bundle/ca_bundle/ca_intermediate_root_bundle.pem node your_script.js
Other ways to use the generated PEM file are available at:
https://github.com/arvind-agarwal/node_extra_ca_certs_mozilla_bundle
NOTE: I am the author of the above module.
I had an issue with my Apache configuration after installing a GoDaddy certificate on a subdomain. I originally thought it might be an issue with Node not sending a Server Name Indicator (SNI), but that wasn't the case. Analyzing the subdomain's SSL certificate with https://www.ssllabs.com/ssltest/ returned the error Chain issues: Incomplete.
After adding the GoDaddy provided gd_bundle-g2-g1.crt file via the SSLCertificateChainFile Apache directive, Node was able to connect over HTTPS and the error went away.
If you come to this thread because you're using the node postgres / pg module, there is a better solution than setting NODE_TLS_REJECT_UNAUTHORIZED or rejectUnauthorized, which will lead to insecure connections.
Instead, configure the "ssl" option to match the parameters for tls.connect:
{
ca: fs.readFileSync('/path/to/server-ca.pem').toString(),
cert: fs.readFileSync('/path/to/client-cert.pem').toString(),
key: fs.readFileSync('/path/to/client-key.pem').toString(),
servername: 'my-server-name' // e.g. my-project-id/my-sql-instance-id for Google SQL
}
I've written a module to help with parsing these options from environment variables like PGSSLROOTCERT, PGSSLCERT, and PGSSLKEY:
https://github.com/programmarchy/pg-ssl
Hello just a small adition to this subject since in my case the
require('ssl-root-cas/latest')
.inject()
.addFile(__dirname + '/comodohigh-assurancesecureserverca.crt');
didn't work out for me it kept returning error that the file could not be downloaded i had been a couple of hours into the reasearch of this particular error when I ran into this response https://stackoverflow.com/a/65442604
Since in my application we do have a proxy to proxy some of our requests as a security requirement of some of our users I found that in the case you are consulting an API that has this issue and if you can access the API url throught your browser you can proxy your request and it might fix the [Error: UNABLE_TO_VERIFY_LEAF_SIGNATURE] issue.
An example of how i use my proxy
await axios.get(url, {
timeout: TIME_OUT,
headers: {
'User-Agent': 'My app'
},
params: params,
proxy: {
protocol: _proxy.protocol,
host: _proxy.hostname,
port: _proxy.port,
auth: {
username: _proxy_username,
password: _proxy_password
}
}
});
I had the same problem and I am able to fix it the following way,
Use the full-chain or just the chain certificate instead of just the certificate.
That is all.
This same error can be received when trying to install a local git shared repo from npm.
The error will read: npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE
Apparently there is an issue with the certificate, however what worked for me was change the link to my shared repo in the package.json file from:
"shared-frontend": "https://myreposerver"
to:
"shared-frontend": "git+https://myreposerver"
In short, just adding git+ to the link solved it.
Another reason node could print that error is because a backend connection/service is misconfigured.
Unfortunately, the node error doesn't say which certificate it was unable to verify [feature request !]
Your server may have a perfectly good certificate chain installed for clients to connect and even show a nice padlock in the browser's URL bar, but when the server tries to connect to a backend database using a different misconfigured certificate, then it could raise an identical error.
I had this issue in some vendor code for some time. Changing a backend database connection from self-signed to an actual certificate resolved it.
You have to include the Intermediate certificate in your server. This solves the [Error: UNABLE_TO_VERIFY_LEAF_SIGNATURE]