通过Angular 2和JSON发送对象到Spring-Boot的RestController

Question

现在我正在使用H2数据库，并且想要注册一个用户并在数据库中看到它。

（后端模块）弹簧引导正在端口8080和角2（前端模块）上运行3000

（FRONTEND）

@Injectable() 
export class RegisterService { 

    constructor (private http:Http) { } 

    sendUser (newUser: RegisterModel) { 
     let url = "http://localhost:8080/user/register"; 
     // let header = new Headers({'Content-Type': 'application/json'}); 

     return this.http.post(url, JSON.stringify(newUser)); //, {headers: header} 
    } 
} 

RegisterModel

export class RegisterModel{ 
    public userId: number; 
    public firstName: string; 
    public lastName: string; 
    public userName: string; 
    public password: string; 
    public passwordCheck:string; 
    public created: Date; 
} 

运行RegisterComponet

@Component ({ 
    moduleId: module.id, 
    selector: 'register', 
    templateUrl: './register.html' 
}) 
export class RegisterComponent { 

    newUser: RegisterModel = new RegisterModel(); 

    constructor (private registerService: RegisterService){ 

    } 

    onSubmit() { 
     this.registerService.sendUser(this.newUser).subscribe(
      data => { 

       this.newUser = new RegisterModel(); 
      }, 
      error => console.log(error) 
     ); 
    } 
} 

（BACKEND）

@RestController("/user") 
public class UserController { 

@Autowired 
    UserService userService; 

@RequestMapping(value = "/register", method = RequestMethod.POST) 
    public User registerUser(@RequestBody User user){ 

     System.out.println("YAY-----------"+user.getFirstName()); 
     return userService.save(user); 
    } 

CORS过滤

@Configuration 
public class CorsConfig { 

    @Bean 
    public CorsFilter corsFilter() { 

     UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); 
     CorsConfiguration config = new CorsConfiguration(); 
     config.setAllowCredentials(true); // you USUALLY want this 
     config.addAllowedOrigin("*"); 
     config.addAllowedHeader("*"); 
     config.addAllowedMethod("GET"); 
     config.addAllowedMethod("PUT"); 
     config.addAllowedMethod("POST"); 
     source.registerCorsConfiguration("/**", config); 
     return new CorsFilter(source); 
    } 

@Bean 
    public WebMvcConfigurer corsConfigurer() { 
    return new WebMvcConfigurerAdapter() { 
     @Override 
     public void addCorsMappings(CorsRegistry registry) { 
     registry.addMapping("/").allowedOrigins("http://localhost:3000"); 
     } 
    }; 
    } 
} 

这里是我的目录：

完全指南：

，我在控制台收到错误：

我检查后的反应，这就是我得到：

混帐回购协议

GIT LINK

------------------ UPDA TE 1 -----------------------

我我CorsConfig类更新为：

@Configuration 
public class CorsConfig { 

    @Bean 
    public CorsFilter corsFilter() { 

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); 
    CorsConfiguration config = new CorsConfiguration(); 
    config.setAllowCredentials(false); //updated to false 
    config.addAllowedOrigin("*"); 
    config.addAllowedHeader("*"); 
    config.addAllowedMethod("GET"); 
    config.addAllowedMethod("PUT"); 
    config.addAllowedMethod("POST"); 
    source.registerCorsConfiguration("/**", config); 
    return new CorsFilter(source); 
    } 

    @Bean 
    public WebMvcConfigurer corsConfigurer() { 
    return new WebMvcConfigurerAdapter() { 
     @Override 
     public void addCorsMappings(CorsRegistry registry) { 
     registry.addMapping("/").allowedOrigins("http://localhost:3000"); 
     } 
    }; 
    } 

} 

错误控制台：

XMLHttpRequest cannot load http://localhost:8080/user/register. Response for preflight is invalid (redirect) 

这是我所得到的，当我通过谷歌浏览器插件

我的混帐代表使用Advanced REST client o用我当前的代码更新。

我打算使用弹簧安全性，一旦我能够得到这个工作。

Answer 1

@Component 
@Order(Ordered.HIGHEST_PRECEDENCE) 
public class CorsFilter implements Filter { 

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) { 
    HttpServletResponse response = (HttpServletResponse) res; 
    HttpServletRequest request = (HttpServletRequest)req; 
    response.setHeader("Access-Control-Allow-Origin", "*"); 
    response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE"); 
    response.setHeader("Access-Control-Allow-Headers", "origin, x-requested-with, accept, Authorization, Content-Type"); 
    response.setHeader("Access-Control-Max-Age", "3600"); 
    if (!request.getMethod().equals("OPTIONS")) { 
     try { 
     chain.doFilter(req, res); 
    } catch (IOException e) { 
     // TODO Auto-generated catch block 
     e.printStackTrace(); 
    } catch (ServletException e) { 
     // TODO Auto-generated catch block 
     e.printStackTrace(); 
    } 
    } 
    } 

    public void init(FilterConfig filterConfig) {} 

    public void destroy() {} 

} 

写这个过滤器insted的以下

`@Bean 
public CorsFilter corsFilter() { 

UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); 
CorsConfiguration config = new CorsConfiguration(); 
config.setAllowCredentials(false); //updated to false 
config.addAllowedOrigin("*"); 
config.addAllowedHeader("*"); 
config.addAllowedMethod("GET"); 
config.addAllowedMethod("PUT"); 
config.addAllowedMethod("POST"); 
source.registerCorsConfiguration("/**", config); 
return new CorsFilter(source); 

}`

Answer 2

您需要在春季启动应用程序中添加CORS过滤器以允许跨浏览器请求。