I have implemented a CORS filter class in my Spring Boot application:
@Component
public class CorsingFilter {
@Bean
public CorsFilter corsFilter() {
final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
final CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
// It's important not to do this in production, use a proper list of allowed origins
config.setAllowedOrigins(Collections.singletonList("http://localhost:3000"));
config.setAllowedHeaders(Arrays.asList("Origin", "Content-Type", "Accept"));
config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH"));
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}
Here is the controller I have defined:
@RestController
@RequestMapping("/test")
public class TestController {
@CrossOrigin(origins = "http://localhost:3000")
@GetMapping("/cox")
public String getCox(){
return "COX";
}
}
This is the react request I am making:
let url = "http://localhost:8080/test/cox";
const agent = new https.Agent({
rejectUnauthorized: false
});
try {
const res = await axios.get(url, {
auth: {
username: 'user',
password: '123456'
},
headers: {
'Content-Type': 'application/json',
"Access-Control-Allow-Origin": "http://localhost:8080",
'Access-Control-Allow-Credentials': true,
"Access-Control-Allow-Methods": 'HEAD, GET, POST, PUT, PATCH, DELETE',
"Access-Control-Allow-Headers": 'Origin, Content-Type, X-Auth-Token',
},
httpsAgent: agent
})
console.log(res)
} catch (err) {
console.log(err)
}
This is how the browser cors error appears
This is what the request looks like
In addition, the request successfully works when accessed from the browser (using localhost:8080)