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?

does this answer your question? - https://stackoverflow.com/a/36821971/12541413 — Sagar Darekar, Jul 26 '22 at 04:31

score 2 · Accepted Answer · edited Jul 26 '22 at 10:34

2

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 your request on the frontend side withCredintails

edited Jul 26 '22 at 10:34

Sagar Darekar

982
9
14

answered Jul 24 '22 at 18:18

shadi1999

49
7

you mean like this. headers.add("Access-Control-Allow-Origin", "http://localhost:3000"); – chk.buddi Jul 25 '22 at 01:15
hi @shadi1999, i tried, but it does not work – chk.buddi Jul 25 '22 at 12:55
1

try to change the fetch function from this await fetch('http://localhost:8080/api/roll') into this await fetch('http://localhost:8080/api/roll', { credentials: 'include', headers: {'Content-Type': 'application/json'} } ) where you make the request – shadi1999 Aug 13 '22 at 17:47

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

1 Answers1