react如何访问本地接口

访问本地接口的方法

在React项目中访问本地接口，通常需要配置代理或直接调用本地服务器地址。以下是几种常见的方法：

配置代理

在package.json中设置proxy字段，指向本地服务器的地址。例如：

{
  "proxy": "http://localhost:5000"
}

这样，所有发送到/api的请求会自动转发到http://localhost:5000/api。

使用环境变量

创建.env文件，定义本地接口的地址：

REACT_APP_API_BASE_URL=http://localhost:5000

在代码中通过process.env.REACT_APP_API_BASE_URL访问该变量：

fetch(`${process.env.REACT_APP_API_BASE_URL}/api/data`)
  .then(response => response.json())
  .then(data => console.log(data));

直接调用本地地址

如果本地服务器运行在特定端口（如5000），可以直接在代码中调用：

fetch('http://localhost:5000/api/data')
  .then(response => response.json())
  .then(data => console.log(data));

解决跨域问题

如果遇到跨域问题，可以在本地服务器配置CORS。例如，使用Express时：

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());

使用Axios

安装Axios库后，可以更方便地调用本地接口：

import axios from 'axios';
axios.get('http://localhost:5000/api/data')
  .then(response => console.log(response.data));

开发服务器代理

在webpack.config.js或vite.config.js中配置代理：

// Vite示例
export default {
  server: {
    proxy: {
      '/api': 'http://localhost:5000'
    }
  }
};

通过以上方法，可以灵活地在React项目中访问本地接口。