2017-08-17 8 views
0

私はコンタクトページを持つ反応サイトで作業しています。連絡先ページには、特定のメールアドレスに送信されるメッセージを入力するためのテキストフィールドがあります。Host ReactとExpressは同じサーバーにありますか?

今私は反応アプリで表現を設定しようとしています。私はExpressが必要なものはこの1つの機能です。私は

は、アプリは、私が

$.post('http://localhost:3030/API',{value:'hi'}, function(result) { 
    console.log(result); 
}); 

をやっていると私エクスプレスindex.jsファイルで、私は物事が正常に動作しているかどうかを確認するための簡単なテストとして

app.get('/API', (request, response) => { 
    console.log(request); 
}) 

をやって反応します。

私はこれらの両方を実行し、私のpost機能を実行しようとすると、基本的にはcan't make a request to a separate domainと言っているNo 'Access-Control-Allow-Origin' header is present on the requested resource.エラーが発生します。ここでの問題はエラーではありませんが、私はExpressサーバを稼動しており、2つの異なるサーバ上でアプリケーションを反応させています。

同じサーバーにそれらを置く方法はありますか?私はバックエンドの開発に非常に新しいです、どんな助けも非常に高く評価されるでしょう!

+0

本当にそれほど難しいことではありません。あなたのエクスプレスアプリにReactアプリのHTMLを提供させてください。 – James

答えて

2

はい、Reactはクライアントで実行され、ExpressはNode.jsフレームワークです。あなたが定型文を実行している場合、Expressを使用している可能性はかなり高いです。

ここでは、より完全なルーティングについて説明します。 https://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d

私のアプリケーションのいくつかでは、私のルートは、次のようなものを見て:あなたはまた、物事をバイパスすることができ

let reactRoute = (request, response, next) => { 
    //render your react page however you're doing that. 
    } 
    express.use('/API', yourApiFunction) 
    express.use('/', reactRoute) 
    express.use('/*', reactRoute) //Wildcards are REALLY important if you're routing inside react. 

:あなたはよりシンプルになりたい場合は、それはおそらくのようなものである

//router.js--and I'm positive this is from some react-express boilerplate 
var express = require('express'); 
var router = express.Router(); 

/* GET home page. */ 
router.get('/', function(req, res, next) { 
    res.render('index', { title: 'Express' }); 
}); 

const react = (req, res, next)=>{ 
    res.render('react', { 
    title: 'React Application', 
    layout: false 
    }); 
}; 

router.get('/app', react); 
router.get('/app*', react); 
module.exports = router; 

//app.js 
... 
app.use('/', routes); //<--this is the exported router. 
... 

をプロキシを使用していますが、おそらくもっと複雑になる傾向があります。また、あなたがそれに慣れていないなら、バックエンドのノードに固執する必要はないことに留意してください。 Reactはクライアント側ですが、私はいくつかのプロダクション.NETアプリケーション、PHP(lordy!)、そして、はい、Nodeサーバーの多くを使用しています。

+0

ありがとうございました!最後にそれを働かせました。 –

関連する問題