react后端接口怎调
时间: 2025-02-07 13:05:23 浏览: 28
### 如何在 React 应用中调用后端 API 接口
#### 安装 Axios
为了简化 HTTP 请求,在前端可以安装并使用 `axios` 这个库来发起网络请求。通过命令行工具运行以下指令完成安装:
```bash
cnpm install axios
```
#### 编写函数调用后端接口
定义一个名为 `getById` 的方法用于向服务器发送 GET 请求,该方法接收一个参数 `id` 并将其作为查询字符串的一部分传递给 URL。
```javascript
import axios from 'axios';
const getById = (id) => {
axios.get(`http://localhost:8080/api1/accountCustomer/getAccountCustomerByAccountIDAsyn?id=${id}`)
.then(response => console.log('请求成功', response.data))
.catch(error => console.log('请求失败', error));
}
```
注意这里使用了模板字面量 `${}` 来构建动态URL[^1]。
#### 处理跨域问题
当遇到浏览器同源策略限制导致的跨域资源共享(CORS)错误时,可以在项目的 `package.json` 文件里增加 `"proxy"` 字段指定代理地址为后端服务所在的主机名和端口号:
```json
{
"name": "...",
"version": "...",
...
"proxy": "http://localhost:8080"
}
```
这使得开发期间所有的相对路径API请求都会被转发到目标服务器上处理。
对于生产环境下的部署,则通常会在反向代理层面上解决这个问题,比如 Nginx 或者 Apache 配置相应的规则。
#### Flask 后端设置 CORS 支持
如果后端采用的是 Python 的 Flask 框架搭建的服务,那么可以通过引入第三方扩展包 `flask-cors` 实现对CORS的支持。具体做法是在创建Flask实例之后立即注册此插件即可开启全局范围内的跨域支持功能。
```python
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/api/endpoint')
def endpoint():
# Your logic here...
pass
```
上述代码片段展示了如何快速启用整个应用程序级别的跨域权限授予机制[^3]。
阅读全文
相关推荐


















