如何将您的React应用程序连接到相同来源的后端

如何在同一来源为React和服务器端后端应用程序提供服务,而不必在服务器上使用CORS并担心端口

我认为启动React应用程序的最常用方法是使用create-react-app。非常方便。

您可能会遇到的一个问题是如何将其连接到您已经拥有的后端,或者您可能想创建一个。

开发中

开发应用程序时,您想利用热重载和create-react-app的所有其他便利功能。您如何将其与后端结合而不必在服务器上使用CORS并担心端口?

我将在帖子中提供一个使用Express的示例,但这适用于任何其他框架。

假设您正在测试,让我们创建一个React应用程序:

npx create-react-app testing

然后

cd testing

现在,在server.js文件中创建一个简单的Express服务器,您可以将其添加到所需的任何位置。它甚至可以完全放在单独的文件夹中。

如果您选择将此文件添加到create-react-app应用程序代码,运行:

npm install express

我们已经准备好出发了。添加此简单的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对使用Express构建的Node.js服务器的代理API请求。

现在使用node server.js。在另一个窗口中,您使用来启动CRA应用程序npm start

当浏览器在端口3000(默认情况下)上打开时,打开DevTools并运行:

fetch('/hey')

如果您检查网络面板,则应该通过以下方式获得成功的响应: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)

免费下载我的反应手册


更多反应教程: