axios POST请求遇到OPTION错误

Question

我想使用axios与后端交互。这是我的前端代码：

  AXIOS.post('/api/login',qs.stringify({
    'username': this.form.username,
    'password': this.form.password
  })).then((response) => {
    var status = response.data;
    if(status === 'successful') {
      this.$router.push('/information');
    } else {
      alert(response.data.message);
    }
    console.log(response);
  }).catch((error) => {
    console.log(response);
  });

我已经这样配置axios：

import axios from 'axios'

export const AXIOS = axios.create({
    baseURL: 'http://loacalhost:8088',
    headers: {
       'Access-Control-Allow-Origin': 'http://localhost:8080'
    }
})

然后我在后端使用Spring Boot。为了解决CORS问题，我做了一些配置：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import static org.springframework.web.cors.CorsConfiguration.ALL;

@Configuration
public class CORSConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins(ALL)
                .allowedMethods(ALL)
                .allowedHeaders(ALL)
                .allowCredentials(true);
    }
}

这是我的控制器：

@RestController
@RequestMapping("/api")
public class LoginController {

    @RequestMapping(path = "/login", method = RequestMethod.POST)
    public @ResponseBody String login(@RequestParam String username,
                                      @RequestParam String password){
        if(username.equals("123") && password.equals("123")){
            return "successful";
        } else {
            return "failed";
        }
    }

}

当前端尝试发布请求时，Chrome捕获了两个错误：

我应该怎么做才能解决这个奇怪的问题？有人可以帮忙吗？