我正在开发一个create-react-app。在开发过程中，我在package.json中配置的代理上运行后端服务器，它运行得很好。然后我了解到这个代理功能只用于开发，而不用于生产。环顾四周后，我发现一个简单的生产解决方案是从Express服务器提供build文件夹沿着所有API路由。create-react-app文档中概述了此方法，如下所示：******
使用这种方法（经过一些调整和改变），应用程序在本地主机上运行时可以完美地工作。但是当我部署到生产（使用firebase）时，应用程序可以正确渲染，但API路由不工作。路由似乎是发送回create-react-app构建的index.html文件，而不是数据。
以下是我的Express服务器的基本功能：
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const app = express();
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
//API routes...
app.post('/api/test', async (req, res) => {
res.send("Hello world!")
});
//Serving the front end...
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
});
app.listen(3000, () => console.log('Running on port 3000'));下面是我在前端使用fetch进行的API调用：
handleTest = async () => {
return fetch('/api/test', {
method: 'post',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
foo: "bar",
}),
});
.then(response => {
console.log(response)
console.log(response.text())
});
};下面是我在部署到活动站点时点击“/api/test”时得到的响应：
Response {type: 'basic', url: 'https://example.com/api/test', redirected: false, status: 200, ok: true, …}深入研究响应，它似乎是HTML，而且似乎是我的构建版本的index.js文件：
Promise {<pending>}[[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: "<!doctype html><html lang=\"en\"><head><meta charset=\"utf-8\"/><link rel=\"apple-touch-icon\" ... "知道为什么这个API调用在localhost上运行时可以工作，但在firebase上部署时却不能工作吗？非常感谢您的帮助！：）
1条答案
按热度按时间g6ll5ycj1#
Response.text()，返回使用响应正文的文本表示进行解析的承诺。您确实在打印承诺，这是正确的行为。更多信息here或者（当您使用异步方法时）不进行测试：