vue和spring boot测试时遇到的问题

问题描述

vue和springboot前后端调试时，后端使用了@RequstBody注解需要前端发送一个post请求的json数据，但是前端发送post请求时(下面配置已经配置好的情况下)，请求状态一直是padding，过一会儿就报tomcat连接超时异常(原因是前端使用了vue的代理解决跨域请求了)。

解决办法

首先让前端修改请求方式为post，还有content-type为application/json确保发送的是json数据，前端vue框架不要使用代理来请求后端接口，否则配置了也一样会报错。
后端通过下面代码将前端ip+端口配置上解决跨域问题就可以了。
后端解决跨域问题的代码：

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 CORSFilter {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写*，否则cookie就无法使用了
        config.addAllowedOrigin("http://127.0.0.1:8080");//填写前端的ip+端口，然后前端通过他本地ip+端口访问请求，不要使用localhost
        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        // 4）允许的头信息
        config.addAllowedHeader("*");
        // 5）有效期
        config.setMaxAge(360000L);
        //2.添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
        //3.返回新的CORSFilter.
        return new CorsFilter(configSource);
    }
}

这样就可以发送json数据了，