Blocked by CORS policy: No 'Access-Control-Allow-Origin' header after docker implementation

Question

I have recently created simple ReactJs + Springboot application. Through button click, it calls a method in a springboot application. In my local, it works perfectly. After that I created docker files for both app and combined both using docker compose file and deployed in docker. I had used nginx server too.All are running in the Docker, but When I click the button in react UI, it doesn't call the method in the springboot. It throws following error in the web console.

Access to fetch at 'http://localhost:8080/api/roll' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
GET http://localhost:8080/api/roll net::ERR_FAILED 502

In my react App, Package.jason. > "proxy": "http://localhost:8080" , I removed and tried. It didn't work

In react page,

await fetch('http://localhost:8080/api/roll')
            .then(response => response.json())
            .then(data => {

I tried both 'http://localhost:8080/api/roll' and 'api/roll' . But it didn't work.

In Springboot project, I tried followings.

Adding @CrossOrigin, but it didn't work.

@RestController
@CrossOrigin
@RequestMapping("/api")
public class GameController {
    

   
    
@GetMapping("/roll")
Public Player rollingDice()


public class CORSResponseFilter implements ContainerResponseFilter {
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext)
            throws IOException {

        MultivaluedMap<String, Object> headers = responseContext.getHeaders();

        headers.add("Access-Control-Allow-Origin", "*");
        headers.add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        headers.add("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, X-Codingpedia");
    }

}


@Configuration
@Primary
public class DefaultJerseyServletConfig {

    @Bean
    public ServletRegistrationBean<Servlet> defaultJersey(RestResourceMainConfig serviceConfig) {
        ServletRegistrationBean<Servlet> defaultJersey = new ServletRegistrationBean<Servlet>(
                new ServletContainer(serviceConfig));
       defaultJersey.addUrlMappings("/api/*");
       defaultJersey.setName("DefaultJersey");
       defaultJersey.setLoadOnStartup(0);

        return defaultJersey;
    }
}

None of the above, did not work for me. Can anybody help me to solve the issue?

Answer 1

I think you should write the frontend URL in the Access-Control-Allow-Origin which is here http://localhost:3000

also you have to make you request in the frontend side withCredintails