React 和 Express 阻止跨源请求

阻止跨源请求的方法在现代网络应用开发中非常重要。React和Express是两个常用的开发框架，可以帮助我们构建强大的前后端应用。本文将介绍如何使用React和Express来阻止跨源请求，并提供一个案例代码来说明这个过程。

shell
npm install axios

javascript
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const MyComponent = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('http://example.com/api/data');
        setData(response.data);
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, []);
  return (
    
      {data ? (
        
          {data.map((item) => (
            
{item.name}
          ))}
        
      ) : (
        
Loading...
      )}
    
  );
};
export default MyComponent;

shell
npm install cors

javascript
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
// 添加路由处理程序
// ...
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

javascript
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
// 添加路由处理程序
// ...
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

javascript
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const MyComponent = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('http://localhost:3000/api/data');
        setData(response.data);
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, []);
  return (
    
      {data ? (
        
          {data.map((item) => (
            
{item.name}
          ))}
        
      ) : (
        
Loading...
      )}
    
  );
};
export default MyComponent;