Spring Boot с базовой аутентификацией и cors

Question

Я работаю над изучением весенней загрузки, и у меня есть несколько вопросов о базовой аутентификации и cors.

Я создал две страницы и ajax для серверной части.

Первая страница ajax usernameи пароль для бэкэнда и метод POST.Кроме того, он использовал базовую аутентификацию.В случае успеха первая страница будет перенаправлена ​​на вторую страницу.

Вторая страница будет ajax для бэкенда после загрузки второй страницы.Он использует GET и не получит никаких данных, кроме HTTP.Status.

Это моя функция ajax на первой странице.

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"
            });
}

Это моя функция ajax на второй странице.

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);

            });
        }

Это мой 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);
    }
}

Но на втором шаге страницы я получил сообщение об ошибке «Доступ к XMLHttpRequest на» http://localhost:10000/getAllEmployee' из источника 'null' было заблокировано политикой CORS: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: у него нет статуса HTTP ok. "

Я не могу с этим справитьсяпроблема, несмотря на то, что я ищу некоторые актуальные проблемы.

За исключением этого вопроса, как правильно хранить токен аутентификации на стороне клиента?Если нет, то как я могу это сделать?

Спасибо!