I cant make rest calls with react

Question

I am learning to use React at the moment, and I have a problem: I want react to work with my Java Spring Boot backend (Tomcat). React is running on port 3000 (default) and my Tomcat server on port 8080 (default). Now, when I make a REST call, I get the following error

script.js:13 GET http://localhost:8080/api/path?p=test net::ERR_CONNECTION_REFUSED

My rest call looks like:

fetch('http://localhost:8080/api/path?p=test')
        .then(res => {
            console.log(res);
        });

What do I make wrong? I do not really have an idea.

Did you try sending request with postman or likely posting apps ? Other case, your backend is accepts cross origin requests ? — Tugrul
– Tugrul, Commented Dec 5, 2016 at 7:56
Try localhost:8080/api/path?p=test in your browser. Does it work? — user6999902
– user6999902, Commented Dec 5, 2016 at 7:58
Connection refused means exactly what it says, for some reason it cannot communicate with your backend. Check if your path is correct, if your backend is running, ... . We can't solve this issue with the info we have right now. — Dimitri Mestdagh
– Dimitri Mestdagh, Commented Dec 5, 2016 at 8:00
Okay, thank @g00glen00b .. im stupid, my backend was not running. Now my connection gets accepted, but I get No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. — Christian Peters
– Christian Peters, Commented Dec 5, 2016 at 8:08

Dimitri Mestdagh · Accepted Answer · 2016-12-05 09:01:26Z

An net::ERR_CONNECTION_REFUSED error is typically thrown when your frontend (React application) cannot connect to your backend (your Spring boot application). There are many possible reasons for this to happen, such as:

Your back-end application is not running
The path to your back-end application is not correct
There is some kind of firewall between your front- and back-end application that is stopping the traffic
...

In your case it appeared to be the back-end application that was not running properly.

Your second problem is related to CORS, which is a mechanism that prevents JavaScript from connecting to other APIs/websites that are not on the same (sub)domain and port. In your case your frontend is running on a different port than you backend, so that means you have to deal with CORS.

To handle CORS, you have to add a header to your backend (namely the Access-Contol-Allow-Origin header the error is mentioning). With Spring, you can do that by adding the following annotation to your controller:

@CrossOrigin(origins = "http://localhost:3000")

Or you can configure CORS globally with a filter or using WebMvcConfigurer:

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/api/**").allowedOrigins("http://localhost:3000");
        }
    };
}

As mentioned in the comments by @Lutz Horn, this is also described in a Spring guide.

Collectives™ on Stack Overflow

I cant make rest calls with react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related