No 'Access-Control-Allow-Origin' header is present on the requested resource - when trying to get data from REST api using Axios

Question

My SpringBoot Application Code :

public class ServerApplication {

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

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

I have also implemented Controller Method CORS configuration as mentioned in https://spring.io/guides/gs/rest-service-cors/

I am using this code snippet to add a response header to enable CORS after referring this.

    @ModelAttribute
    public void setResponseHeader(HttpServletResponse response) {
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
    }

According to this answer, I also tried adding these headers in my frontend in axios interceptors.

I have read a lot of answers on StackOverflow about the same issue, titled "Access-Control-Allow-Origin" but still coudnt figure out how to solve this. I dont want to use an extension IN Chrome or any proxy or use a temporary hack to solve this. Is there any way I can fix this?

score 1 · Answer 1 · answered Jul 02 '21 at 19:34

Everything is fine, except you have mapping for addMapping("/**") twice. Internally CorsRegistry stores the mapping in the arraylist in ordered fashion so in the above case for any origin registry.addMapping("/**").allowedOrigins(); is the mapping that is added last for all the paths. Not sure why you have the line registry.addMapping("/**").allowedOrigins(); removing it should solve your problem.
If you have some TODO on registry.addMapping("/**").allowedOrigins(); just swap make it the line before allowedOrigins("http://localhost:3000"); (although allowedOrigins() does not help any cause).

Final code will look like

public class ServerApplication {

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

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

                /*Remove the below line**/
                //registry.addMapping("/**").allowedOrigins();
            }
        };
    }
}

Did this but I am still getting the same error. Do I need to keep the headers in my axios interceptor? Since this is a response side header, I don't think it is doing any benefit on the request side. — Khushbu Patel, Jul 03 '21 at 03:18
You have to add mappings in response side headers, don't see why the above solution wouldn't work, DId you recompile and restart your spring server? — Rathan Naik, Jul 03 '21 at 05:42
Can you post the Errors snippet you are getting ? If You are still facing errors, feel free to drop the repo link in the comments, will have a look at the codebase and suggest tweaks if any required. — Rathan Naik, Jul 03 '21 at 07:43
Yes, I did restart the server. The error is the same as I was getting. However, I removed every bit of code related to CORS and did only a few changes and now it is working fine. Thank you for your help. — Khushbu Patel, Jul 05 '21 at 05:33

score -1 · Accepted Answer · answered Jul 05 '21 at 05:43

I removed everything from my code snippets which was related to CORS.

Now, my application code looks like this :

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

I also removed the Controller Method CORS configuration. Simply I have put a @CrossOrigin annotation above all the controllers.

Also added httpSecurity.cors() in WebSecurityConfig which is used for permitting HTTP requests. Below is the code snippet,

protected void configure(HttpSecurity httpSecurity) throws Exception {
    httpSecurity.cors().and().csrf().disable()    
    // have further lines of code for authentication.
}

This solved my issue.

No 'Access-Control-Allow-Origin' header is present on the requested resource - when trying to get data from REST api using Axios

2 Answers2