2016-12-05 24 views
1

現時点でReactを使用することを学んでいます。問題があります。私はJava Spring Bootバックエンド(Tomcat)で作業したいと思います。 Reactはポート3000(デフォルト)とポート8080(デフォルト)のTomcatサーバーで実行されています。私が間違って作るのですか何私は反応で休憩を取ることができません

fetch('http://localhost:8080/api/path?p=test') 
     .then(res => { 
      console.log(res); 
     }); 

:今、私はREST呼び出しを行うとき、私は次のエラーを取得する

script.js:13 GET http://localhost:8080/api/path?p=test net::ERR_CONNECTION_REFUSED 

私の残りの呼び出しは次のようになりますか?私は本当に考えがありません。

+2

郵便配達員または可能性の高い投稿アプリでリクエストを送信しようとしましたか?その他のケースでは、バックエンドはクロスオリジン要求を受け入れますか? – Tugrul

+0

ブラウザでhttp:// localhost:8080/api/path?p = testを試してください。それは動作しますか? –

+1

接続が拒否されたということは、何らかの理由でバックエンドと通信できないということを意味します。バックエンドが実行されている場合は、パスが正しいかどうかを確認してください。私たちは今私たちが持っている情報でこの問題を解決することはできません。 – g00glen00b

答えて

6

net::ERR_CONNECTION_REFUSEDフロントエンド(Reactアプリケーション)がバックエンド(あなたのSpring起動アプリケーション)に接続できない場合、通常はエラーがスローされます。

  • あなたのバックエンド・アプリケーションがファイアウォールのいくつかの種類があり、あなたのバックエンドアプリケーションへのパスが
  • を修正されていない
  • を実行していない次のようなこれを実現するための多くの理由がありますが、あなたのケースでは、トラフィック
  • を停止して、あなたのフロントとバックエンドアプリケーション...

の間で正常に動作していなかったバックエンドアプリケーションであるように思われました。

2番目の問題はCORSに関連しています。これは、JavaScriptが同じ(サブ)ドメインとポートにない他のAPI/Webサイトに接続できないようにするメカニズムです。あなたのフロントエンドはバックエンドとは異なるポートで動作しているので、CORSに対処する必要があります。

CORSを処理するには、バックエンドにヘッダーを追加する必要があります(つまり、Access-Contol-Allow-Originヘッダーにエラーが表示されます)。春では、あなたのコントローラに以下の注釈を追加していることを行うことができます。

@CrossOrigin(origins = "http://localhost:3000") 

それとも、フィルターやWebMvcConfigurerを使用してグローバルCORSを設定することができます:@でのコメントで述べたように

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

をLutzホーン、これはSpring guideにも記載されています。

関連する問題