前端和后端的跨域问题——Invalid CORS request解决

前端部署在http://localhost:8080，而SpringBoot创建的后端部署在http://localhost:9000。即使都是在本地，端口号不一样也是跨域。所以当前端页面点击登陆按钮要访问后端时会产生Invalid CORS request，且Request Method为OPTIONAL。

解决方案：
编写一个CorsConfig：

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        // 设置你要允许的网站域名，如果全允许则设为 *
        config.addAllowedOrigin("http://localhost:8080");  //这里意思是允许端口号为8080的来访问服务器
        // 如果要限制 HEADER 或 METHOD 请自行更改
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        // 这个顺序很重要哦，为避免麻烦请设置在最前
        bean.setOrder(0);
        return bean;
    }
}

编写以上配置类后，能成功访问后端并且Request Method变为了POST。