Axios CORS error (403) even server allow all - spring

Question

I tried to get the jwt token from the Springboot server with Axios POST request, and I got this error below:
xhr.js:166 OPTIONS url net::ERR_ABORTED 403
Access to XMLHttpRequest at 'url' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
It seems like it couldn't pass the preflight request with 'Access-Control-Allow-Origin' header. So I configured the 'Access-Control-Allow-Origin' on the header but somehow it is still not working.
Here is the code:
React:
return Axios({
method: 'post',
url: 'url',
data: qs.stringify(json),
headers: {
'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
'authorization': 'Basic token',
},
});
Spring Boot:
#Bean
CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration conf = new CorsConfiguration();
conf.setAllowedOrigins(Arrays.asList("*"));
conf.setAllowedMethods(Arrays.asList("POST", "GET", "OPTIONS", "DELETE", "PUT"));
conf.setAllowedHeaders(Arrays.asList("Content-Type", "X-Requested-With", "accept,Origin", "Access-Control-Request-Method", "Access-Control-Request-Headers", "Authorization", "Cache-Control", "Access-Control-Allow-Origin"));
conf.setAllowCredentials(true);
conf.setMaxAge(3600L);
...
}

Answer 1

Try this, by default allow all headers and Urls just to check
#Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS").allowedHeaders("*")
.allowCredentials(true).maxAge(MAX_AGE_SECS);
}
Also shouldn't your url be without quote
return Axios({
method: 'post',
url: url, // like this
data: qs.stringify(json),
headers: {
'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
'authorization': 'Basic token',
},
});
Finally just to make a note
Check if your URL is permitted in security configuration else you will get 403
#Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
...
.antMatchers("/url*").permitAll() // Allow whatever url is passed
...
;
}

Answer 2

I figured out this issue. What I couldn't notice is that response header from the server doesn't have Access-Control-Allow-Origin. so Access-Control-Allow-Origin header in response has to tell browsers to allow any request from certain origin (in this case http://localhost:3000) which I haven't set up to return by now. so I add Access-Control-Allow-Origin:* on the response header by using filter.
This is the code I added.
package com.citus.travelmaker.api.config.datasource;
import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
#Component
#Order(Ordered.HIGHEST_PRECEDENCE)
public class SimpleCorsFilter implements Filter {
public SimpleCorsFilter() {
}
#Override
public void init(FilterConfig filterConfig) {
}
#Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest request = (HttpServletRequest) req;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization");
if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
response.setStatus(HttpServletResponse.SC_OK);
} else {
chain.doFilter(req, res);
}
}
#Override
public void destroy() {
}
}
The above code I got from here. With that I was able to get 200 status from the server.
You can also check out the difference of the response header between before and after I changed the code
Before
After
As you can see, the Access-Control-Allow-Origin added nicely