原点から「のhttp：// localhostを：9528」CORSポリシーによってブロックされました：「：// localhostの9600 /ユーザー/ログアウトのhttp」のではXMLHttpRequestへのアクセス
のリクエストヘッダフィールドX-トークンは、アクセス制御-許可により許可されていませんプリフライト応答で-headers。
分離のVueのaxios springboot springsecurityフロントエンド
以下のような構成は以下のとおりです。
フロント：
.env.development：
ENV = '開発'
＃ベースのAPI
VUE_APP_BASE_API = 'のhttp：// localhostを：9600'
request.js：
CONSTサービス= axios.create（{
ベースURL：process.env.VUE_APP_BASE_API、// URL = URL +基本要求URL // TODO
withCredentials：真、//送信クッキークロスドメインリクエスト
タイムアウト：5000 //要求のタイムアウト
}）
user.jsの
エクスポート機能のログイン（データ）{
復帰要求（{
ヘッダー：{
'Content-Typeの'： 'アプリケーション/ x-www-form-urlencodedで'
}、
URL： '/ユーザー/ログイン'、
方法：「ポスト」
データ：Qs.stringify（データ）
}）
}
エクスポート機能ログアウト（）{
復帰要求（{
URL： '/ユーザ/ログアウト'、
方法： 'ポスト'
}）
}
リア： cn.example.project.configをパッケージ化。 輸入cn.example.project.config.sec *。 輸入cn.example.project.module.base.Message; 輸入cn.example.project.module.rbac.Resource; 輸入cn.example.project.module.rbac.ResourceDB; 輸入org.springframework.beans.factory.annotation.Autowired; 輸入org.springframework.boot.web.servlet.FilterRegistrationBean; 輸入org.springframework.context.annotation.Bean; 輸入org.springframework.context.annotation.Configuration。 輸入org.springframework.core.Ordered; 輸入org.springframework.http.HttpMethod; 輸入org.springframework.security.authentication.BadCredentialsException。 輸入org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder。 輸入org.springframework.security.config.annotation.web.builders.HttpSecurity。 輸入org.springframework.security.config.annotation.web.builders.WebSecurity。 輸入org.springframework.security.config.annotation.web.configuration.EnableWebSecurity。 輸入org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter; 輸入org.springframework.security.core.Authentication。 輸入org.springframework.security.core.AuthenticationException。 輸入org.springframework.security.core.userdetails.UsernameNotFoundException。 輸入org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder。 輸入org.springframework.security.web.AuthenticationEntryPoint; 輸入org.springframework.security.web.access.intercept.FilterSecurityInterceptor; 輸入org.springframework.security.web.authentication.AuthenticationFailureHandler; 輸入org.springframework.security.web.authentication.AuthenticationSuccessHandler; 輸入org.springframework.security.web.authentication.logout.LogoutSuccessHandler; 輸入org.springframework.web.cors.CorsConfiguration。 輸入org.springframework.web.cors.UrlBasedCorsConfigurationSource。 輸入org.springframework.web.filter.CorsFilter; 輸入javax.servlet.ServletException; インポートのjavax.servlet.http.Cookie。 インポートのjavax.servlet.http.HttpServletRequest; インポートのjavax.servlet.http.HttpServletResponse; インポートにjava.io.IOException; 輸入はjava.util.List; java.util.UUIDインポート; @EnableWebSecurity @Configuration パブリッククラスSecurityConfigはWebSecurityConfigurerAdapterを{延び @Autowired SecurityUserService securityUserService; // @Autowired DynamicallyUrlInterceptorインターセプタ。 @Autowired UnauthorizedEntryPoint unauthorizedEntryPoint; @オーバーライド 保護されたボイドを設定（AuthenticationManagerBuilderのAUTH）は{例外をスロー auth.userDetailsService（securityUserService）.passwordEncoder（新しいBCryptPasswordEncoder（））; } / ** * https://blog.csdn.net/sinat_33151213/article/details/89931819 * @Paramウェブ * @throws例外 * / @オーバーライド 公共のボイドのconfigure（WebSecurity社ウェブは）{例外がスローされます web.ignoring（）antMatchers（ "/ index.htmlを"、 "/静的/ **"、 "/ login_p"、 "/favicon.ico"）。 } @オーバーライド 保護された空のconfigure（HttpSecurityのhttpは）{例外がスローされます http.authorizeRequests（） /*.antMatchers(HttpMethod.OPTIONS,"/**").permitAll()*/ .antMatchers（ "/ index.htmlを"、 "/static/**","/static/index.html"、 "/ login_p"、 "/favicon.ico"）。permitAll（） 許可の確認なし//「/ログイン」 .anyRequest（）。（認証済み）他の人がアクセスするにはログインが必要です// 。そして（） .formLogin（） // loginProcessingUrlは、インタフェースのコールバックグラウンドログイン名の分離の終了前と後の時間を指定するために使用しました .loginProcessingUrl（ "/ユーザー/ログイン"） .usernameParameter（ "ユーザ名"）。passwordParameter（ "パスワード"） .successHandler（新しいAuthenticationSuccessHandler（）{//カスタム処理クラスの成功したログイン設定 @オーバーライド 公共のボイドonAuthenticationSuccess（HttpServletRequestのREQ、 HttpServletResponseのRESP、 認証AUTH）は、IOExceptionが{スロー メッセージメッセージ=新しいメッセージ（ "成功"、 "！登录成功"、PermissionUtil.getCurrentUser（））; //フロントエンドに提供されるクッキーを設定します message.setToken（UUID.randomUUID（）のtoString（））。 PermissionUtil.handle（REQ、RESP、メッセージ）。 } }）。failureHandler（新しいAuthenticationFailureHandler（）{ @オーバーライド 公共のボイドonAuthenticationFailure（HttpServletRequestのREQ、 HttpServletResponseのRESP、 含むAuthenticationException e）はIOExceptionが{スロー メッセージメッセージ= NULL; 電子BadCredentialsException instanceofは（もし|| UsernameNotFoundException instanceofのE）{ メッセージ=新しいメッセージ（ "エラー"、 "！アカウント名またはパスワードが間違っ"、e.getMessage（））; }他{ メッセージ=新しいメッセージ（ "エラー"、 "！登录失败"、e.getMessage（））; } PermissionUtil.handle（REQ、RESP、メッセージ）。 } }） 。そして（） .logout（）。logoutUrl（「/ユーザ/ログアウト」）// logoutUrlフロントの分離および後端コールバックキャンセルインターフェースの名前を指定します .logoutSuccessHandler（新しいLogoutSuccessHandler（）{ @オーバーライド 公共ボイドonLogoutSuccess（HttpServletRequestのREQ、HttpServletResponseのRESP、認証の認証）はにIOException、ServletExceptionがを{スロー メッセージメッセージ=新しいメッセージ（ "成功"、 "注销成功！"、NULL）; PermissionUtil.handle（REQ、RESP、メッセージ）。 } }） .AND（）。exceptionHandling（）。authenticationEntryPoint（unauthorizedEntryPoint）//設定したカスタム処理クラスの許可なし 。そして（） 。無効.Cors（）無効（）CSRF（）（）; ... // CSRFの保護解除 http.addFilterBefore（インターセプター、FilterSecurityInterceptor.class）。 } } cn.example.project.configをパッケージ化。 輸入org.springframework.boot.web.servlet.FilterRegistrationBean; 輸入org.springframework.context.annotation.Bean; 輸入org.springframework.context.annotation.Configuration。 輸入org.springframework.web.cors.CorsConfiguration。 輸入org.springframework.web.cors.UrlBasedCorsConfigurationSource。 輸入org.springframework.web.filter.CorsFilter; 輸入org.springframework.web.servlet.config.annotation *。; / ** *コンフィギュレーションが可能にクロスドメインはlocalhost：9900 / AAログインはローカルホスト：9900 / BBも認識ログイン * / @Configuration パブリッククラスWebMvcConfg実装WebMvcConfigurer { / ** *設定の静的リソース * https://blog.csdn.net/sinat_33151213/article/details/89931819 * @paramレジストリ * / @オーバーライド 公共のボイドaddResourceHandlers（ResourceHandlerRegistryレジストリ）{ registry.addResourceHandler（ "/静的/ **"）addResourceLocations（ "クラスパス：/静的/"）;。 registry.addResourceHandler（ "/公共/ **"）addResourceLocations（ "クラスパス：/パブリック/"）; } // @Override //ます。public void addCorsMappings（CorsRegistryレジストリ）{ // registry.addMapping（ "/ **"） （真）// .allowCredentials // .allowedHeaders（ "*"） // .allowedOrigins（ "*"） // .allowedMethods（ "*"）; // //} // //プライベートCorsConfiguration corsConfig（）{ // CorsConfiguration corsConfiguration =新しいCorsConfiguration（）; // / * 一般的に、すべての代表が、その後、あなたも（など唯一のポスト方法であることができるものとヘッダのみ、など）属性をカスタマイズすることができます許可する*使用* //リクエスト3つの構成 // * / // corsConfiguration.addAllowedOrigin（ "*"）; // corsConfiguration.addAllowedHeader（ "*"）; // corsConfiguration.addAllowedMethod（ "*"）; （真）// corsConfiguration.setAllowCredentials。 // corsConfiguration.setMaxAge（3600L）。 //戻りcorsConfiguration。 //} // @豆 //パブリックCorsFilter corsFilter（）{ // UrlBasedCorsConfigurationSourceソース=新しいUrlBasedCorsConfigurationSource（）; // source.registerCorsConfiguration（ "/ **"、corsConfig（））; //新しいCorsFilter（ソース）を返します。 //} // @Override //ます。public void addCorsMappings（CorsRegistryレジストリ）{ // registry.addMapping（ "/ **"） // .allowedOrigins（ "*"） // .allowedMethods（ "PUT"、 "DELETE"、 "GET"、 "POST"） // .allowedHeaders（ "*"） // .exposedHeaders（「アクセス制御 - 許可 - ヘッダ」、 // "アクセス制御 - 許可-方法"、 //「アクセス制御 - 許可 - 起源」、 // "アクセス制御-MAX-年齢"、 // "X-フレーム・オプション"） // .allowCredentials（真）.maxAge（36000）; // //} // // @豆 //パブリックCorsFilter corsFilter（）{ //最終UrlBasedCorsConfigurationSourceソース=新しいUrlBasedCorsConfigurationSource（）。 //最終CorsConfigurationの設定=新しいCorsConfiguration（）; （真）// config.setAllowCredentials。 // config.addAllowedOrigin（ "*"）; // config.addAllowedHeader（ "*"）; // config.addAllowedMethod（ "OPTIONS"）。 // config.addAllowedMethod（ "HEAD"）; // config.addAllowedMethod（ "GET"）; // config.addAllowedMethod（ "PUT"）; // config.addAllowedMethod（ "POST"）; // config.addAllowedMethod（ "DELETE"）; // config.addAllowedMethod（ "PATCH"）。 // source.registerCorsConfiguration（ "/ **"、設定）。 //最終CorsFilter豆=新しいCorsFilter（ソース）。 //戻り豆。 //} 次のCORSを有効にする必要があるので// ------------、ブロッカーを追加しました。----------------------------- / ** * * @paramレジストリ * / @オーバーライド 公共のボイドaddCorsMappings（CorsRegistryレジストリ）{ //クロスドメインパスのセットを許可します （ "/ **"）registry.addMapping //設定は、ドメイン名のクロスドメイン要求を許可します .allowedOrigins（ "*"） //証明書を許可するかどうか、もはやデフォルトで有効にされていません .allowCredentials（真） //許可される方法を設定します。 .allowedMethods（ "*"） //クロスドメインの時間を許可します .maxAge（3600）。 } @豆 公共FilterRegistrationBean corsFilter（）{ UrlBasedCorsConfigurationSourceソース=新しいUrlBasedCorsConfigurationSource（）。 CorsConfiguration設定=新しいCorsConfiguration（）; config.setAllowCredentials（真の）; config.addAllowedOrigin（ "*"）; config.addAllowedHeader（ "*"）; config.addAllowedMethod（ "*"）; source.registerCorsConfiguration（ "/ **"、設定）。 FilterRegistrationBeanビーン=新しいFilterRegistrationBean（新しいCorsFilter（ソース））。 bean.setOrder（0）。 Beanを返します。 } } 私がログインを要求し始めました。
成功したログインCookieの後、 http：// localhostを：9528 /＃/ログインログインページを提供しています。 にログオンします http：// localhostを：9600 /ユーザー/ログイン 成功したログインCookieがブラウザに保存された後、次のリクエスト http：// localhostを：9600、バックエンドサービス、クッキーを運ぶには、リソースを要求したユーザのログインを表します。
しかし、私は辞めます。http：// localhost：9600 /ユーザー/ジンバブエログアウト
XMLHttpRequestのATへのアクセス'HTTP：// localhostを：9600 /ユーザー/ジンバブエログアウト'起源から'HTTP：// localhostを：9528は' CORSによってブロックされましたポリシー：
リクエストヘッダフィールド、X-トークンは-IS許可するアクセス制御・イン・プリフライトレスポンスヘッダで許可されていません。
著作権管理ユーザテンプレートの役割半日アウト：メソッドの良い品種をお探しの約束のために苦痛です。私は2ヶ月に書きました。私は完了していません。今はまだ書いてログインします。（あまりにも愚かな、あまりにもナイーブ）
クロスドメインを解決Axios、問題の変更オプションへのPOSTリクエストを送ります 実際、私はそのポストを作ったが、後になってしまいます。 オプションの事前のリクエストがある旨の、要求は本物ました。 最後に、 https://stackoverflow.com/questions/36705874/request-options-logout-doesnt-match-post-logout 答えを見つけるには：
私のコードは、すべてのオプションの要求を許可するように変更されます。
http.authorizeRequests（）
.antMatchers（HttpMethod.OPTIONS、 "/ **"）。permitAll（）
最後にログアウト成功
