Spring Boot with basic authentication and cors - spring

Question

I'm working on learning spring boot, and I have some questions about basic authentication and cors.
I created two pages and ajax to backend side.
The first page ajax username and password to backend and the method is POST.
Besides, it used basic authentication.
If its successes, the first page will redirect to the second page.
The second page will ajax to backend after the second page was loaded.
It uses GET and it will get no data except HTTP.Status.
This is my ajax function in the first page.
function login () {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
alert(btoa(username + ":" + password));
var settings = {
"async": true,
"crossDomain": true,
"url": "http://localhost:10000/login",
"method": "POST",
"headers": {
"content-type": "application/json",
"accept": "application/json",
"authorization": "Basic " + btoa(username + ":" + password),
"cache-control": "no-cache",
}
}
alert(settings);
$.ajax(settings).done(function (response) {
console.log(response);
localStorage.setItem("token", btoa(username + ":" + password));
window.location = "file:///home/cyl/SecurityTest/pages/getEmployeePage.html"
});
}
This is my ajax function in the second page.
function getData () {
alert(localStorage.getItem("token"));
var settings = {
"async": true,
"crossDomain": true,
"url": "http://localhost:10000/getAllEmployee",
"method": "GET",
"headers": {
"authorization": "Basic " + localStorage.getItem("token"),
"accept": "application/json",
"content-type": "application/json",
"cache-control": "no-cache"
}
}
$.ajax(settings).done(function (response, textStatus, xhr) {
console.log(response);
});
}
This is my RestController
#RestController
#EnableWebSecurity
#EnableGlobalMethodSecurity(prePostEnabled = true)
public class EmployeeController {
#CrossOrigin(origins="*", allowedHeaders = "*")
#PostMapping(path = "/login")
public ResponseEntity<String> login() {
return new ResponseEntity<String>(HttpStatus.ACCEPTED);
}
#CrossOrigin(origins="*", allowedHeaders = "*")
#GetMapping(path = "/getAllEmployee")
public ResponseEntity<String> getAllEmployee() {
//List<Employee> employeeList = this.employeeDAO.getAllEmployee();
return new ResponseEntity<String>(HttpStatus.OK);
}
}
CorsConfig
#Configuration
public class CorsConfig implements WebMvcConfigurer {
#Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST")
.allowCredentials(true);
}
}
But at the second page step, I got an error
"Access to XMLHttpRequest at 'http://localhost:10000/getAllEmployee' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status."
I can't deal with this problem despite I search some relevant issues.
Except for this question, The way I store the authentication token in the client side is a right way?
If not, how can I do that?
Thanks!

Answer 1

you can use this Spring annotation if you run the same spring project on your local machine and the JS project with this tag will allow you to access the rest service
#CrossOrigin(origins = "*", maxAge = 3600)
public class controllerRest{}
regards!