I am developing a Cordova application with Axios and React. I can build this app with Cordova and run the resulting APK on my phone with no problems whatsoever. However, when I sign and zipalign the app and put it on the Play store - network requests do not work.
This is an example of a request :
const instance = axios.create({
baseURL: "http://darajava.ie:8888/api/api",
headers: {
'accept': 'application/json'
}
});
instance.post('authenticate', querystring.stringify({
username,
password,
})).then((res) => {
console.log('LOG ' + JSON.stringify(res));
}).catch(function (error) {
console.log('ERR ' + JSON.stringify(error));
});
The response on the unsigned apk (on the actual phone) is normal, whereas we get "Network Error" from the Play store version. I did some research on Axios' Network Error and it seems that that occurs when it cannot reach the server. Keep in mind that all other requests fail too.
Does anybody know where I would even start to debug this?
The problem was that the newer versions of Android do not support cleartext traffic. Either explicitly allow cleartext or use a secure server.
Related
I cannot get Firebase AppCheck to work in production mode on a Vue.js project with Firestore and Storage. But It works normally in development.
const appCheck: AppCheck = initializeAppCheck(firebaseApp, {
provider: new ReCaptchaV3Provider(reCaptchaSiteKey),
isTokenAutoRefreshEnabled: true,
});
getToken(appCheck)
.then((result: AppCheckTokenResult) => {
console.log(process.env.NODE_ENV);
console.log(result.token);
})
.catch((e: FirebaseError) => {
console.log(process.env.NODE_ENV);
console.log(e.code + ": " + e.message);
});
In Development mode, using vite, get the token back:
In Production mode, with firebase serve, get appCheck/fecth-status-error:
Firebaser here!
The error you are receiving is due to the App Check backend not being able to verify the underlying reCAPTCHA attestation.
Things to check for:
is reCAPTCHA providing a valid attestation and not somehow thinking your device is a bot?
does the site secret uploaded to App Check for this App match the client ID you are using in the App?
If you are using a Debug Token in your development build, that might explain why that one is succeeding.
I've been trying to work this out for hours. I'm currently trying to learn React Native development with a Node/Express backend. I can't seem to make an Axios get request to my local API from my Expo app running on my IOS device (real device).
I have tried adding
"infoPlist": {
"NSAppTransportSecurity": {
"NSAllowsArbitraryLoads": true,
"NSAllowsLocalNetworking": true,
"NSExceptionDomains": {
"192.168.1.4": {
"NSExceptionAllowsInsecureHTTPLoads": true,
"NSRequiresCertificateTransparency": false
}
}
}
}
to my app.json.
I have also tried the following:
using both localhost and my backends ipv4 address as the requests URL
creating a Self Signed SSL Key for the server, sending the certificate to the iPhone, and trusting it.
pretty much everything you can find on StackOverflow and IOS dev forums.
Here is the axios request that is made from React-Native:
const onLoginPress = () => {
console.log("login pressed");
axios
.post('https://192.168.1.4:5000/api/auth/login', {email, password})
.then(function (response) {
//handle success
console.log(response);
if (response.data.success) alert(`successful login, token: ${response.data.token}`);
})
.catch(function (error) {
//handle error
alert('login was not successful')
console.log(error);
})
};
Here is the error that I get when executing the GET from the iPhone running the app in Expo GO:
Network Error
at node_modules\axios\lib\core\createError.js:16:14 in createError
at node_modules\axios\lib\adapters\xhr.js:117:24 in handleError
at node_modules\event-target-shim\dist\event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
at node_modules\react-native\Libraries\Network\XMLHttpRequest.js:609:10 in setReadyState
at node_modules\react-native\Libraries\Network\XMLHttpRequest.js:396:6 in __didCompleteResponse
at node_modules\react-native\Libraries\vendor\emitter\_EventEmitter.js:135:10 in EventEmitter#emit
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:414:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:113:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:365:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:4 in callFunctionReturnFlushedQueue
Currently, the GET request works when running the Expo app in a web browser and in Postman, if I trust the self-signed certificate of course, or disable SSL verification.
IOS Device where the problem persists is an iPhone 11 Pro Max running IOS 14.8.1
try using ngrok,
download and extract it on the same folder and use this command
ngrok http http://localhost:your_api_port
you will get an ngrok url which you could send requests to from your react native app
Im trying to use fetch API to communicate with my server on the localhost, fetch request throws the following error:
[Unhandled promise rejection: TypeError: Network request failed]
- node_modules\whatwg-fetch\dist\fetch.umd.js:473:29 in xhr.onerror
- node_modules\event-target-shim\dist\event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:574:29 in setReadyState
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:388:25 in __didCompleteResponse
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190:12 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue
I have read that ios does only support https requests even though I was able to do this before, the only difference is that I was using xampp/mysql and now im using nodejs with mongoose.
I simply use the following on the front end
fetch("http://localhost:3000/user/login", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
console.log("Success:", data);
console.log("Success");
})
.catch(error => {
console.log(error);
});
The server is working correctly, I can normally post data and login successfully using postman.
(Using JSON)
I have also tried inputting just a random google url (https://google.com) and it returned a readable error which is logical which supported the https concern.
Any suggestions?
Edit:
It appears this has nothing to do with iphones nor ssl, I have installed an android emulator (Pixel XL, R Software), the emulator is not reaching my localhost, I have also tried using my pc's local ip.
I have no idea why its not communicating with the server, is it some expo configuration?
Try using your ip address as the baseUrl: similar to "https://192.XXX.X.XX:3000"
To get it from the terminal run ifconfig and it will be there.
you can setup a self signed certificate on your local web server see: https://shellcreeper.com/how-to-create-valid-ssl-in-localhost-for-xampp/ or you can google other terms similar to "Setup self signed certificate on localhost".
Our Electron app needs some configuration files and usually downloads them from our server. In case the client is offline, we don't want him to see any error messages. We are using Electron Download Manager to get the files.
This is how we request the files
try{
DownloadManager.bulkDownload({
urls: links
}, function (error, finished, errors) {
if (error) {
console.log("ERROR: Encountered error during config file download!");
console.log("Finished Files: " + finished);
console.log("Errors: " + errors);
return;
}
console.log("Finished loading all configuration files.");
});
} catch (err){
online_status = false;
console.log("Couldn't get online configuration. Starting app as offline.");
}
With this code the error Uncaught Exception: Error: net::ERR_ADDRESS_UNREACHABLE is thrown, when not connected to the internet.
I tried implementing the official event detection from Electron but as they state:
Such as in cases where the computer is running a virtualization
software that has virtual ethernet adapters that are always
“connected.” Therefore, if you really want to determine the internet
access status of Electron, you should develop additional means for
checking.
Then I went on trying just to ping the server like in this thread but this doesn't work at all for me, it's possible that it doesn't work anymore.
This is a bug in Electron Download Manager, documented in an GitHub Issue like #JeffRSon stated. A pull request is ready for a merge but not merged yet (posted 06.06.2019).
I hope this helps you. I will update this question if it get's merged and works.
I am attempting to use a Google Cloud provided VM to host a React.js front-end that contacts Spring Boot services (that are running in a Docker container). I was able to successfully contact the Spring Boot services, both running locally and remotely, while my React app was on my development machine. Now, however, I am attempting to move the React portion to the cloud as well. However, when I issue a request using the axios.js library:
componentDidMount() {
axios.get(this.props.baseEndpoint + "/inventory")
.then((res) => {
const inv : any = res.data;
console.log(res);
this.setState( {inventory: inv});
});
axios.get(this.props.baseEndpoint + "/category")
.then((res) => {
const cats : any = res.data;
console.log(res);
this.setState( {categories: cats});
});
}
where "baseEndpoint" is sourced from a config file:
export const BASE_URL : string = "http://localhost";
export const SEARCH_BASE : string = BASE_URL + ":8081/find";
export const INVENTORY_BASE : string = BASE_URL + ":8082";
the request fails.
With Firefox Developer's tools, a "Network Error" is logged to the console. However, whenever I switch over to the "Network" tab itself, it is as if the "Get" request is still pending or something. There is no response status (such as 500, 404, 200, etc), and both the "transferred" and "size" fields say 0. The response payload is empty.
The React app is served using a very simplistic Nginx configuration.
server { listen 80;
root /home/kelly/workspace/front-end/distr;
index index.html
location / {}
}
However, I can use curl to successfully GET the same endpoint (http://localhost:8082/category, for example) just fine. What might the issue be? I have also tried 127.0.0.0.
Thanks.
EDIT:
Request headers from Firefox Developer tools:
Accept
application/json, text/plain, */*
Accept-Encoding
gzip, deflate
Accept-Language
en-US,en;q=0.5
Connection
keep-alive
Host
localhost:8082
Origin
http://mysite
Referer
http://mysite/index.html
User-Agent
Mozilla/5.0 (X11; Linux x86_64…) Gecko/20100101 Firefox/58.0
Sample output from curl:
[{"id":1,"skuCode":"PS1","displayName":"PlayStation"},{"id":2,"skuCode":"PS2","displayName":"PlayStation 2"},{"id":3,"skuCode":"WII","displayName":"WII"},{"id":4,"skuCode":"GBC","displayName":"Gameboy Color"},{"id":5,"skuCode":"GBA","displayName":"Gameboy Advance"},{"id":6,"skuCode":"NDS","displayName":"Nintendo DS"},{"id":7,"skuCode":"N64","displayName":"Nintendo 64"},{"id":8,"skuCode":"GC","displayName":"Gamecube"},{"id":9,"skuCode":"SEG","displayName":"Sega Genesis"}]
EDIT TWO:
Networking is not my area of expertise, however, I tried running tcptrack -i eth0 while contacting my application. I see two requests to port 80 (presumably one for my HTML page and one for my .js file) from my local machine/browser. I also see multiple connections from my VM's IP to 169.254.169.254 (which based on this question, is simply a link-local address associated with cloud providers) and my SSH connection. However, I do not see any requests to port 8081, 8082, or anywhere else for that matter. Not sure if that might help provide some insight.
Thanks again.