Vue应用请求SpringBoot API出现 CORS 跨域请求设置 Invalid CORS request错误

这个错误是因为浏览器的同源策略所导致的，同源策略要求请求的协议、域名、端口号必须全部匹配，否则就会出现跨域问题。

要解决这个问题，有两种方法：

1. 在 SpringBoot 中配置 CORS。在 SpringBoot 的配置文件中，可以添加如下配置：

   @Configuration
   public class CorsConfig {
       @Bean
       public WebMvcConfigurer corsConfigurer() {
           return new WebMvcConfigurer() {
               @Override
               public void addCorsMappings(CorsRegistry registry) {
                   registry.addMapping("/**")
                           .allowedOrigins("*")
                           .allowedMethods("*")
                           .allowedHeaders("*");
               }
           };
       }
   }

这段代码表示允许所有来源（`allowedOrigins("*")`）、所有方法（`allowedMethods("*")`）和所有请求头（`allowedHeaders("*")`）的跨域请求。

2. 在 Vue 应用中使用代理。在 Vue 应用的 `config/index.js` 文件中，可以添加如下配置：

   module.exports = {
     dev: {
       proxyTable: {
         '/api': {
           target: 'http://localhost:8080',
           changeOrigin: true,
           pathRewrite: {
             '^/api': '/api'
           }
         }
       }
     }
   }

这段代码表示将所有以 `/api` 开头的请求代理到 `http://localhost:8080`，并开启跨域请求支持（`changeOrigin: true`）。在 Vue 应用中，请求的 URL 可以写成 `/api/xxx` 的形式，这样就会被代理到目标服务器。