Expo client run in phone communication with local backend - spring-boot

I'm trying out the communication between my backend / frontend. The application is developed in react native and my backend is based on spring boot. When I run my application in my phone through the Expo Go app I can't send http requests to my backend (it works with postman at: localhost:8080/user).
When I try to do the same requests in my application I have defined the following function:
export function signup(signupRequest) {
return fetch({
url: "192.168.10.152:8080" + "/user",
method: "POST",
body: JSON.stringify(signupRequest)
});
}
And then I get the following error:
[Unhandled promise rejection: TypeError: Network request failed]
at node_modules/whatwg-fetch/dist/fetch.umd.js:535:17 in setTimeout$argument_0
If it helps I run my backend on ubuntu 20.04 and I got my local ip with the command
ip a
Update, I have no updated my application.properties in my spring-boot project like this:
server.address=192.168.10.152
server.port=8080
I still get the same error when I try to make a post-request from my react native application however.

I tried to push my backend to the domain with https protocol and everything was ok. There's an application, ngrok that allows you to send requests to a server but using other link with https protocol.
For example, if you have your backend server on localhost:5000, then you need to open ngrok command line and integrate your server with ngrok http 5000 command. As the result you'll get a link that will look like this:
https://f971-31-128-76-233.eu.ngrok.io

Related

What is the request that whatsapp cloud api does to verify a webhook?

I'm able to verify the webhook using glitch from the getting started:
https://glitch.com/edit/?fbclid=IwAR2YTjZuGGM9Hi6T_v1eZh_nV6_HY3RYn_8lll4gY1REa_bJy6ZAuq6tkKQ#!/whatsapp-cloud-api-echo-bot
my local server (in a subdomain with https enabled) has the same behavior as glitch and show "WEBHOOK_VERIFIED" on the log for the request:
/webhook?hub.mode=subscribe&hub.verify_token=xpto123&hub.challenge=123
but when try to verify my local server the request from meta does not reach the server.
chrome showing that the connection to the server is secured
After more tests I found that my local server was been blocked by the ISP, understood it after test with another connection.
I made my own server and had tried ngrok and other programs to run it from local host with https redirect but whatsapp doesn't allow the use of those programs.
In the end, my error was that the URL HAS to end in /webhook or else, it won't even send the request. Then it'll send a GET request and you have to return the hub.challenge query param after making sure that the provided token from them is the one you set up. This is my code using NodeJS
if(req.query['hub.verify_token'] === process.env.VERIFY_TOKEN) return res.status(200).send(req.query['hub.challenge'])

Request blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space local

I have two projects on ubuntu server. I have a React and Spring Boot project running as a container. I expose frontend like 3000:3000 but I don't want to expose my backend project. I just want it to access from the react container.
I run my images like
Spring Boot:
docker run -d registry.gitlab.com/my-backend-project
React:
docker run -d -p 3000:3000 registry.gitlab.com/my-frontend-project
this is exactly what i want. I can't access backend from remote host like
http://remote-ip:8080
but i can access react project http://remote-ip:3000
also my react container can access spring boot container.
here is where my problem starts.
I test for ping and curl react container to spring boot container and I get success message.
export const example= (body) => {
return axios.post("http://localhost:8080/v1",body)
This is my react code. But like this in Chrome and many browser i get cors error lik:
Access to XMLHttpRequest at 'http://localhost:8080/v1/example' from origin 'http://remote-ip:3000' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space local.
I don't get this error in firefox and turning off "chrome://flags/#block-insecure-private-network-requests" setting in chrome successfully returns result.
How can i fix this, Does what I do make sense?

Network request failed in react native expo

im using expo in react native.i have a problem when post data to api laravel.its say"Network Request Failed".heres my code:
i hope you can help me guys thankyou.enter image description here
I see that your fetch URL is served using an HTTP endpoint. You can only make requests to HTTPS endpoints from react-native projects.
A possible workaround is to use ngrok. Just download it and run:
./ngrok http 8000
Since your port number is 8000. It will expose an HTTPS endpoint and replace your fetch URL with that link and try fetching the data again

Angular + Django: Sending POST request with cookies (CORS)

I'm developing an app using Angular for client side and Django for server side. During development I'm running Django in port 8000 for managing all API requests, and serving my client app using Angular CLI running at port 4200.
Sending GET requests to Django work w/o problems but when I try to send a POST request that includes some cookies with session information, it fails as the cookies are not included in the header.
I know that the source of this "problem" is the CORS issue [read more here] and that it won't be a problem in production as both client and server apps will be running in the same server and port, however I wonder how can I fix this situation at least for development.
I've tried using the django-cors-headers module with the options CORS_ALLOW_CREDENTIALSand CORS_ORIGIN_ALLOW_ALL set to True but it didn't work.
Any ideas?
Finally I managed to make all work.
I thought it was a problem of Django so I installed django-cors-headers module, however the "problem" is in the browser (actually is not a problem, it is a security issue, see [here][1]).
Anyway, I solved the problem using a proxy rule for my Angular CLI, as follows:
First, instead of sending my requests to http://localhost:8000/api/..., I send them to /api/ (i.e. to my Angular server running at port 4200).
Then I added a file in my Angular project called "proxy.conf.json" with the following content:
{
"/api": {
"target": "http://localhost:8000",
"secure": false
}
}
Finally, I added the flag "--proxy-config" to the Angular CLI server:
ng serve --watch **--proxy-config proxy.conf.json**
Now, all API requests are sent to the port 4200 and Angular internally redirects them to Django, avoiding the CORS problem.
Note: With this solution I didn't need anymore the django-cors-headers module.

CORS Socket Request to Sails Server Throwing 500 Error

I have a cordova app running on angular that uses a sails server as its API endpoint. It is set up to use CORS and everything is working with ajax calls.
I am attempting to connect to the sails server using socket.io. I copied the sails.io.s file from the sails server's assets folder to the cordova app. I modified it so that it connects to 127.0.0.1:1337 and does so successfully. It does not use cookies on the front end and the sails end does not use socket authorization (set in config/sockets.js).
When I call:
io.socket.get('/controller/action', function callback(return){
});
The return object looks something like this:
{
message: "TypeError: Object #<Object> has no method 'get'",
status: 500
}
The sails server log doesn't show that it is hitting /controller/action. Does anyone have any experience with using the custom sails io library on a JS client that isn't sails?

Resources