CODEWITHSUNDEEP
javaspringcors
Dan
Dan

Reputation: 2100

CORS is preventing me making API calls

I have an application that is running on two docker containers, a frontend(react.js) and a backend(java, spring).

I have the containers up and running and can verify that they can communicate with one another through ping.

After noticing this issue I looked into it and found a question on here that a user gok provided some useful information and a link to the spring docs which was very informative.

I have applied the changes to my backend code as I was instructed to do so in an earlier question prior to finding out the issue was a CORS one.

So from reading the spring docs I have applied the following to my classes

Config

@Configuration
@EnableWebMvc
public class WebConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/blockchain/**")
            .allowedOrigins("http://frontend:3000")
            .allowedHeaders("*")
            .allowedMethods("*")
            .maxAge(3600);
    }
}

Note I have tried the mapping name of localhost and frontend (container name), neither worked

Controller

@RestController
@RequestMapping(value = "/api/blockchain")
public class BlockchainController {

    @CrossOrigin
    @GetMapping(value = "/address/create")
    public ResponseEntity<String> getNewAddress() {
        String newAddress = blockchainService.getNewAddress();

        if (StringUtils.isNotBlank(newAddress)) {
            return new ResponseEntity<String>(newAddress, HttpStatus.OK);
        }

        return new ResponseEntity<String>(HttpStatus.INTERNAL_SERVER_ERROR);
    }

Note before asked there's more to the controller class, I only included what was necessary.

Console Error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://multichain-api:8080/api/blockchain/address/create. (Reason: CORS request did not succeed).

This error was always coming up and has not changed since I included cors config in my app. Also there is no errors showing in the container logs for this.

Any help or insight into this would be much appreciated.

Upvotes: 1

Views: 337

Answers (2)

drowny
drowny

Reputation: 2147

I did before like this , can u try ? Different from your tried , i added some exposedHeaders().

@Configuration
@EnableWebMvc
public class WebConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/blockchain/**")
                .allowedOrigins("http://frontend:3000")
                .allowedHeaders("*")
                .allowedMethods("*")
                .exposedHeaders("Access-Control-Allow-Headers",
                        "Access-Control-Allow-Origin, Origin, Accept, X-Requested-With, " +
                                "Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers")
                .maxAge(3600);
    }
}

U can remove no need headers which is written in exposeHeaders method. So your problem is with not exposing the "Access-Control-Allow-Origin". U can use only this or more.

Upvotes: 1

Pradip Karki
Pradip Karki

Reputation: 702

This has worked for me in my local.

    @CrossOrigin(origins = "http://frontend:3000")
    @GetMapping(value = "/address/create")
    public ResponseEntity<String> getNewAddress() {
      ...}

Upvotes: 0

Related Questions