可以通过以下步骤完成:
- 部署Express API到Heroku:
- 创建一个Heroku账号并登录。
- 在Heroku上创建一个新的应用程序。
- 将Express API的代码上传到Heroku应用程序中,可以使用Git进行部署或通过Heroku CLI进行部署。
- 配置Heroku应用程序的环境变量,包括数据库连接信息、API密钥等。
- 在React应用中使用axios调用Express API:
- 在React应用的代码中,使用axios库进行HTTP请求。
- 在组件中引入axios库:
import axios from 'axios';
- 在需要调用Express API的地方,使用axios发送请求:axios.get('/api/endpoint')
.then(response => {
// 处理API响应数据
})
.catch(error => {
// 处理错误
});
- 可以根据需要使用不同的HTTP方法,如POST、PUT、DELETE等。
- 配置跨域请求:
- 在Express API的代码中,配置允许来自Heroku应用程序的跨域请求。
- 安装cors中间件:
npm install cors
- 在Express应用程序中使用cors中间件:const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
// 其他中间件和路由配置
app.listen(3000, () => {
console.log('Express API running on port 3000');
});
这样,你就可以在Heroku上成功部署Express API,并在React应用中使用axios调用该API了。