CODEWITHSUNDEEP
reactjsspringreact-nativeaxios
AyiFaruk
AyiFaruk

Reputation: 51

Axios API request from React Native frontend to local spring backend service not working

I develop a React Native mobile app and for the backend I want to use Java Spring. Now I have a standalone backend server running locally on port 8080 and my react native app is run via Expo Go app with npm start.

For this question I have built a very simple example. In the frontend application I want to do a GET request to retrieve a string back from the backend and I am using axios to send API requests. The problem is that I get a Network Error error whenever I send the GET request to http://localhost:8080/

// dont bother func name
const loginUser = () => {

    axios.get("http://localhost:8080/").then(value => {
        console.log(value)
    }).catch(err => {
        console.log("REQUEST FAILED")
        console.log(err)
    })}

This is the handler when user presses a button axios request is send, Expected output: "Hello World"

output:

REQUEST FAILED

Network Error
at node_modules\axios\lib\core\createError.js:17:22 in createError
at node_modules\axios\lib\adapters\xhr.js:120:6 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:600:10 in setReadyState
at node_modules\react-native\Libraries\Network\XMLHttpRequest.js:395:6 in __didCompleteResponse
at node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189:10 in emit
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue

@RestController
    //@CrossOrigin(origins = "*")
    public class TestController {
    
        @GetMapping("/")
        public String hello(){
            return "Hello World";
        }
    }

Simple Spring REST Controller

@SpringBootApplication
public class JpaApplication {

    public static void main(String[] args) {
        SpringApplication.run(JpaApplication.class, args);
    }

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedMethods("GET","POST","PUT","DELETE").allowedHeaders("*").allowedOrigins("*");
            }
        };
    }
}

CORS Config just allowing all

I have tried putting the annotation @CrossOrigin(origins = "*") above the controller but it did not help (seen from: React and Axios : Axios Can't Access Java/SpringBoot REST Backend Service Because of CORS Policy). I have allowed all access from all locations in the CORS config but I get the same output. The example is very simple. I just want to get a simple string back and the solution is probably also very simple but after so many tries I can't come up with a solution. If I visit the URL on the browser I get the expected value, but via axios request it does not seem to work.

Upvotes: 1

Views: 1081

Answers (2)

Alessandro Bastianelli
Alessandro Bastianelli

Reputation: 1

In the file: android/app/src/main/AndroidManifest.xml

add this configuration in the <application tag:

android:networkSecurityConfig="@xml/network_security_config">

Then create the xml folder and create a new file inside it:

android/app/src/main/res/xml/network_security_config.xml

in the file insert:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">192.168.0.104</domain>
        <domain includeSubdomains="true">localhost</domain>

    </domain-config>
</network-security-config>

Where:

192.168.0.104 --> is the IP address of the server that runs the backend in your LAN.

in all references both in the backend and in the frontend remember to use localhost if you use the physical phone or use the ip if you use the emulator instead

Upvotes: 0

AyiFaruk
AyiFaruk

Reputation: 51

After some more searching I found it is not possible to send requests directly to localhost on a Android emulator, on IOS there is no problem. So the problem was after all on the React Native side.

So the fix was relatively easy and also found on stackoverflow, the following thread helped a lot: React Native Android Fetch failing on connection to local API.

I Installed ngrok and this generates a URL which I can use to temporary test my backend till I have hosted it.

Upvotes: 2

Related Questions