通過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過濾器以允許跨瀏覽器請求。