create-react-app 代理请求 php 后端

php

使用 create-react-app 搭建的前端项目通常会通过代理请求与后端进行数据交互。对于与 php 后端的交互，我们可以通过配置代理来实现。

配置代理

在 create-react-app 项目中，我们可以在项目的根目录下找到一个名为 package.JSon 的文件。在该文件中，我们可以找到一个名为 proxy 的字段，用于配置代理。

我们可以将代理的目标地址设置成我们的 php 后端地址。例如，如果我们的 php 后端运行在 http://localhost:8000 上，我们可以将 package.JSon 中的 proxy 字段设置为 http://localhost:8000。

以下是一个示例的 package.JSon 文件配置：

JSon
{
  "name": "my-react-app",
  "version": "0.1.0",
  "proxy": "http://localhost:8000",
  // ...
}

发送请求

在 create-react-app 中，我们可以使用 fetch 或者 axIOS 等工具发送 HTTP 请求。这里以 axIOS 为例进行说明。

首先，我们需要安装 axIOS：

bash
npm install axIOS

然后，我们可以在组件中引入 axIOS，并发送请求到后端。以下是一个示例的组件代码：

JSx
import React, { useEffect, useState } from 'react';
import axIOS from 'axIOS';
const MyComponent = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    axIOS.get('/api/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);
  return (
    <div>
      {/* 渲染从后端获取到的数据 */}
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};
export default MyComponent;

在上述代码中，我们使用 axIOS.get('/api/data') 发送 GET 请求到后端的 /api/data 路径，并将返回的数据存储在组件的状态中。

代理请求示例

假设我们有一个简单的 php 后端，提供了一个接口用于获取数据。以下是一个示例的 php 后端代码：

php
<?php</p>// 启用跨域访问
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET');
// 获取数据
$data = [
  ['id' => 1, 'name' => '数据1'],
  ['id' => 2, 'name' => '数据2'],
  ['id' => 3, 'name' => '数据3'],
];
// 返回 JSON 格式的数据
header('Content-Type: application/JSon');
echo JSon_encode($data);

在上述代码中，我们通过设置响应头来启用跨域访问，并返回一个包含数据的 JSON 格式的响应。

在前端的代码中，我们发送 GET 请求到 /api/data，该请求会被代理到 http://localhost:8000/api/data，并获取到后端返回的数据。

通过配置 create-react-app 的代理，我们可以方便地与 php 后端进行数据交互。使用 axIOS 等工具发送请求，可以轻松地获取后端返回的数据，并在前端进行展示或其他操作。这样，前后端的数据交互就变得更加简单和高效了。