前后端分离项目练习

小虫子:

  • 前后端无法联调
    前端添加代码
/** axios: 发送ajax代码 **/
/* 所有ajax的代码写到这里 */
axios.defaults.baseURL='http://localhost:8018'
// 设置AJAX超时时间
axios.defaults.timeout = 3000
// 设置提交数据时的格式
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

axios.interceptors.request.use(function (config) {
// 判断如果用户登录了就把 token 配置上 axios 的协议头中
let token = localStorage.getItem('token')
if (token) {
config.headers['Authorization'] = token
}
// 处理请求前代码
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
  • 跨域
    创建配置类
@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //放行哪些原始域
        config.addAllowedOrigin("*");
        //是否发送Cookie信息
        config.setAllowCredentials(true);
        //放行哪些原始域(请求方式)
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        config.addAllowedHeader("*");
        //2.添加映射路径
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

  • 后台无法接收前台数据
    前端字段名有误

猜你喜欢

转载自blog.csdn.net/weixin_44046502/article/details/88640537