2017-06-27 7 views
1

私はangular2を試してみました。私はangular2ファイルのアップロードをインストールしました。チュートリアルのすべてのコードをコピーしました。hereAngular2 Ng2ファイルアップロードCORSの問題

私はそこに書かれているものを正確にコピーします。しかし、次のような問題が発生します。

XMLHttpRequestはhttp://localhost:8080/citizen/uploadをロードできません。 プリフライトリクエストへの応答がアクセスコントロールのチェックを通過しない:応答の の 'Access-Control-Allow-Credentials'ヘッダーの の値が ''で、要求の認証モードが 'の場合は' true ' 'したがって、「http://localhost:4200」の原点は許可されません。 XMLHttpRequestによって開始された要求の信任状モードは、withCredentials属性によって制御されます。

私はそのangular2ファイルアップロードコードを追加する前に、このように私のCORSフィルタは私のSpringBoot

@Component 
public class SimpleCorsFilter implements Filter { 
    @Override 
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { 
     HttpServletResponse response = (HttpServletResponse) res; 
     response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200"); 
     response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT"); 
     response.setHeader("Access-Control-Max-Age", "3600"); 
     response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Authorization, Content-Type, Accept, enctype"); 
     chain.doFilter(req, res); 
    } 

にそれはまだ大丈夫だった持っています。それを解決するには?

答えて

3

クロスオリジン要求が発生すると、まずサーバがクロスオリジン要求を許可するかどうかを確認するためにHTTP optionを送信します。春のセキュリティを使用している場合は、HTTP Optionの検証を行わずに許可するかどうかを確認してください。場合は、このようなフィルタを追加

protected void doFilterInternal(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, FilterChain filterChain) throws ServletException, IOException { 
    httpServletResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:4200"); 
    httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true"); 
    httpServletResponse.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT"); 
    httpServletResponse.addHeader("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, X-Codingpedia, Authorization"); 
    httpServletResponse.addHeader("access-control-expose-headers", "Authorization"); 

    if (!"OPTIONS".equals(httpServletRequest.getMethod())) { 
     filterChain.doFilter(httpServletRequest, httpServletResponse); 
    } 
} 
+0

最初に私はあなたのコードを追加します。それでも同じエラーです。私はちょうど私のコードの下に(私の質問で)まだdoesntの仕事を追加します。私は信用証明書を許可しません – dedypuji

+0

websecurity configの 'HTTP Option'にpermit allを設定する必要があります。あなたの角型アプリからの 'HTTP Option'送信のために' 200 OK'を得なければなりません。 – rnavagamuwa

+0

リソースコードはありますか? – dedypuji

関連する問題