开发使用远程服务器API的React应用程序

// 示例：在Node.js服务器端设置CORS头
const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from server!' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

// 示例：在React中使用axios设置请求超时
import axios from 'axios';

axios.get('/api/data', { timeout: 5000 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Request timed out', error);
  });

// 示例：在React中解析JSON数据
import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('/api/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data', error);
      });
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{data.message}</h1>
    </div>
  );
}

export default App;