如何从同一个源头为React和服务器端后端应用提供服务,而不必在服务器上使用CORS和担心端口问题
我认为启动React应用的唯一最常用的方式是使用create-react-app 。它非常方便。
你可能会遇到的一个问题是,如何将它连接到你已经拥有的或你可能想要创建的后端。
在开发中
在开发应用程序时,你想利用热重载和create-react-app的所有其他便利功能。你如何将其与后端结合起来,而不必在服务器上使用CORS并担心端口问题?
我将在文章中提供一个使用Express的例子,但这适用于任何其他框架。
假设你在测试这个,让我们创建一个React应用。
npx create-react-app testing
然后
现在在server.js文件中创建一个简单的Express服务器,你可以把它添加到任何你想要的地方。它甚至可以完全在一个单独的文件夹中。
如果你选择在create-react-app 应用代码里面添加这个文件,运行。
然后我们就可以开始了。 添加这个简单的Express设置。
const express = require('express');
const app = express();
app.get('/hey', (req, res) => res.send('ho!'))
app.listen(8080)
这里的关键点:打开package.json 文件,在某处添加这一行。
"proxy": "http://localhost:8080"
这告诉React将API请求代理给用Express构建的Node.js服务器。
现在使用node server.js ,运行这个Node进程。在另一个窗口中,你使用npm start ,启动CRA应用程序。
当浏览器在3000端口打开时(默认),打开DevTools并运行。
如果你检查网络面板,你应该有一个成功的响应,有ho! 消息。
在生产中
在生产中,当你准备部署时,你要运行npm run build ,我们将使用Express服务器来服务那些静态文件。
整个代理的事情现在已经没用了(而且在生产中也不会起作用,它的目的是为了方便开发)。这意味着你可以把它留在package.json 文件中,如果你觉得方便的话。
在下面的代码中,我们需要path 内置的Node模块,我们告诉应用程序为React应用程序的静态构建提供服务。
const express = require('express')
const path = require('path')
const app = express()
app.use(express.static(path.join(__dirname, 'build')))
app.get('/ping', (req, res) => {
return res.send('pong')
})
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'))
})
app.listen(8080)