開発モードで実行しているとき、私のReactフロントエンド（React Routerで実行中）のログインページにリダイレクトするSpring Securityの設定に問題があります。私は、リダイレクトがフロントエンドで取り上げられていないと考えています。サーバー側のルーティングがSPAルーティングとどのように相互作用するかについての知識があります。SPAのReact Routerを使用したSpring Securityログインページのリダイレクト
私の開発フロントエンドWebサーバー（Facebook Create React Appを使用しています）は、localhost：3000、私のバックエンドのSpring Boot Tomcat on localhost：8080で実行されています。私はSpring Securityを有効にしました。これはTomcatサーバー（8080番ポート）上でうまく動作します。 localhost：8080がlocalhost：8080/loginに転送されます。 localhost：3000にアクセスすると、クロスオリジンエラーが発生するため、hereと記載されているように、SpringでCORSサポートが追加されました。私はまた、this春のブログ記事に相談しました。それは、もはやクロスオリジンエラーを取得しないという点で、うまくいくようです。ログインしていないながら、しかし、ローカルホストからの要求：ローカルホストの3000：8080 /ログインは次の値を返します。
HTTP/1.1 200 OK
X-Powered-By: Express
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Content-Type: text/html; charset=UTF-8
Content-Length: 1496
ETag: W/"5d8-80rXYG+kNfQ/xEJ7J2f1PA"
Vary: Accept-Encoding
Date: Tue, 10 Jan 2017 12:04:07 GMT
Connection: keep-alive
<!DOCTYPE html>
...
これは私のフロントエンドWebサーバにホストされたindex.htmlにあります。これは良いですが、私はlocalhost：3000/loginに転送する必要があり、ログインページをindex.htmlにレンダリングします。 >HttpSecurity.loginPage("/login")（春） - - >registry.addViewController("/login").setViewName("forward:/index.html")（春） -
私はそれがあるため、ルーティング設定の/ログインに転送していないと信じて、それはlocalhost:3000/から行く><Route path="/" component={ForwardToLandingPage} />（ルータに反応）
それは、うまくいきません終わり。私は、Tomcatサーバーがフロントエンドを3000/loginにリダイレクトするようにしたいが、フロントエンドはコンポーネントに行く。サーバ側のリダイレクトとフロントエンドのリアクションルータが適切な場所に移動する間に問題が発生しているようです。これがセットアップするには複雑すぎる場合は、このSpring Security全体を私の開発環境に置いてください。ここで
は私の設定です：
を設定
ReactDOM.render((
<Router history={browserHistory}>
<Route path="/" component={ForwardToLandingPage} />
<Route path="/login" component={Login} />
</Router>
),
document.getElementById('root')
);
Spring MVCの設定
@Configuration
public class MvcConfig extends WebMvcConfigurerAdapter {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
// This forwarding is required, as my React app is rendering on a div
// element with the ID 'root' in /index.html. But is this part of the
// problem?
registry.addViewController("/").setViewName("forward:/index.html");
registry.addViewController("/login").setViewName("forward:/index.html");
}
}
春CORS設定
をルーティングリアクト@Configuration
public class MyConfiguration {
@Bean
public FilterRegistrationBean corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("http://localhost:3000");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
bean.setOrder(0);
return bean;
}
}
春のセキュリティ設定
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.csrf().disable() // temporary fix
.authorizeRequests()
.antMatchers("/h2-console", "/public/**", "/static/**").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login")
.permitAll()
.and()
.logout()
.logoutRequestMatcher(new AntPathRequestMatcher("/logout"));
}
}
間違って何が起こっているの任意のアイデア？
問題の解決策にTomcatが関与するかどうかは疑問だったので、thisもチェックしました。
ありがとうございました！ :)
Facebook Create React Appへのリンクを投稿できますか、ajaxリクエストか通常のhttpリクエストですか？ –
'localhost：8080/login'はログインページですか？ – chaoluo
ご質問ありがとうございます。私は今日もっと実験してきましたが、私はバックエンドとフロントエンドの間のルーティングとリダイレクションに問題があると考えています。私は私の調査結果と設定で質問を更新しました。また、私は自分の開発環境にいるときに問題があると付け加えるべきです。ポート8080またはホストされているAWS Elastic Beanstalkにまっすぐ進むと、すべての（フロントエンドを含む）コンテンツがうまく動作します。それが修正するには複雑すぎる場合、私は開発環境でログインを無効にするだけです。 – Jannik