React/Railsアプリをローカルで実行する

Question

React/Reduxフロントエンドを持ち、レールAPIと通信するアプリケーションをローカルで実行しようとしています。私の.env file私は私のAPI（rails sを実行しているポートを参照していますAPI_URL 3000）と私の反応devのサーバーはlocalhost：3003で実行HOSTで参照されています。

私はlocalhost：3003に行って、私の反応フォントの終わりを持っているとき、私は私のAPIに要求を送るときに次のエラーを受け取ります：Bothy me .envファイルもlocalhost上の正しいポートを指しています。

をXMLHttpRequestで読み込めません。いいえ 要求された リソースに 'Access-Control-Allow-Origin'ヘッダーが存在します。したがって、オリジン 'http://localhost:3003'は許可されません。 応答にはHTTPステータスコード500が付きました。

アイデアはありますか？

Answer 1

はい、私はこれもCORSのことだと思うが、それはCORS + Rails特有のものであり、ノードでは解決できないからです。

CORS'Access-Control-Allow-Originヘッダーをレンダリングページに設定できるようにするrack-corsという名前の宝石があります。

宝石をRailsのミドルウェアのチェーンに設定し、*（最も簡単なもの）またはリクエストが表示される可能性のある特定のホスト（より安全ですが迷惑なもの）を許可します。

優れたブログ記事はNavigating CORS using React and Railsです。

アジャストパイプを使ってリアクションアプリを提供することもできます（フロントエンドアプリケーションをバックエンドとは別の場所に置いておきたい場合はgitサブモジュールやローカルのシンボリックリンクを使用することもできます） ：react-rails-hot-loader

Answer 2

では、あなたの中にプロキシを追加することができます作成​​反応するアプリを使用して作成されたアプリケーションを反応させるには、アプリケーションのpackage.jsonを反応させる。ここに私自身のプロジェクトの上から、この例です

{ 
    "name": "frontend", 
    "version": "0.1.0", 
    "private": true, 
    "proxy": "http://localhost:8000", 
    "dependencies": { 
    "@types/jest": "^19.2.3", 
    "@types/node": "^7.0.18", 
    "@types/react": "^15.0.24", 
    "@types/react-dom": "^15.5.0", 
    "@types/react-router-dom": "^4.0.4", 
    "@types/socket.io": "^1.4.29", 
    "@types/socket.io-client": "^1.4.29", 
    "axios": "^0.16.1", 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4", 
    "react-router-dom": "^4.1.1", 
    "socket.io": "^2.0.1", 
    "socket.io-client": "^2.0.1" 
    }, 
    "devDependencies": { 
    "react-scripts-ts": "1.4.0" 
    }, 
    "scripts": { 
    "start": "react-scripts-ts start", 
    "build": "react-scripts-ts build", 
    "test": "react-scripts-ts test --env=jsdom", 
    "eject": "react-scripts-ts eject" 
    } 
} 

。

Webpackはリクエストを受け取り、package.jsonとCORで指定されたURLにプロキシをプロキシしますSはあなたのために処理されます。もちろん、これは手動で作成された反応アプリケーションで行うことができますが、これはwebpack to proxyリクエストを手動で設定することを意味します。

あなたのコードでは、http://localhost:8000/api/something/someのようなURL全体を書く必要はなく、ちょうどapi/something/someと書くことができます。これはもちろん、デプロイメントからプロダクションに変わるURLの最初の部分は気にしないので、もちろんデプロイメントに役立ちます。

Answer 3

ウェブパックを使用しているが反作用アプリケーションを使用していないこの回答者に移行する場合は、webpack-dev-serverを使用している場合でもプロキシを設定できます。これはReactだけでなく、WebpackのJavaScriptフロントエンドにも当てはまります。

たとえば、フロントエンドをlocalhost：8080で、Railsをlocalhost：3000で実行しています。 webpack.configにあります。JSあなたがdevServerを定義するセクションでファイル：

devServer: { 
    // ... 
    // Rails backend runs on localhost:3000 
    proxy: { 
     '/': { 
     target: 'http://localhost:3000', 
     secure: false 
     } 
    } 
    }, 

あなたがWebpack docs hereで、ここhttp-proxy-middleware docsの設定オプション（基礎となる依存関係）についての詳細を読むことができます。