博主头像
<CodeEra />

心存敬畏 行有所止

React 脚手架中配置代理解决跨域问题

暂无评论

学习笔记：在 React 脚手架中配置代理解决跨域问题

在开发 React 应用时，前端应用（运行在 localhost:3000）通常需要与后端 API（运行在其他域名或端口，如 localhost:5000）进行通信。由于浏览器的同源策略限制，直接请求会导致跨域问题。React 脚手架（Create React App）提供了简单的代理配置来解决这个问题。

1. 什么是跨域问题？

跨域问题是由浏览器的同源策略引起的。同源策略要求请求的协议、域名和端口必须完全相同，否则浏览器会阻止请求。例如：

  • 前端：http://localhost:3000
  • 后端：http://localhost:5000
    由于端口不同，直接请求会导致跨域错误。

2. React 脚手架中的代理配置

React 脚手架（Create React App）支持通过配置文件 package.json 或 setupProxy.js 来设置代理，将前端请求转发到后端服务器，从而避免跨域问题。

3. 方法一：在 package.json 中配置代理

在 package.json 中添加 proxy 字段，指定后端服务器的地址。

示例：
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  "proxy": "http://localhost:5000"
}
说明：
  • 所有未知请求（即 React 应用中没有处理的请求）都会被代理到 http://localhost:5000。
  • 例如，前端请求 /api/data 会被转发到 http://localhost:5000/api/data。
  • 上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000（优先匹配前端资源）.

4. 方法二：使用 setupProxy.js 配置代理

如果需要更灵活的代理配置（如多目标代理、路径重写等），可以使用 setupProxy.js 文件。

步骤：

  1. 安装 http-proxy-middleware：

    npm install http-proxy-middleware
  2. 在 src 目录下创建 setupProxy.js 文件。
  3. 编写代理配置。
示例：
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api', // 匹配所有以 /api 开头的请求
    createProxyMiddleware({
      target: 'http://localhost:5000', // 目标服务器
      changeOrigin: true, // 修改请求头中的 Origin 为目标服务器地址
      pathRewrite: {
        '^/api': '', // 重写路径，去掉 /api 前缀
      },
    })
  );

  app.use(
    '/auth', // 匹配所有以 /auth 开头的请求
    createProxyMiddleware({
      target: 'http://localhost:6000', // 另一个目标服务器
      changeOrigin: true,
    })
  );
};
说明：
  • /api/data 会被转发到 http://localhost:5000/data。
  • /auth/login 会被转发到 http://localhost:6000/auth/login。

5. 测试代理配置

在前端代码中发起请求，测试代理是否生效。

示例：
import React, { useEffect, useState } from 'react';
import axios from 'axios';

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

  useEffect(() => {
    axios.get('/api/data') // 请求会被代理到 http://localhost:5000/data
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
    </div>
  );
};

export default App;

6. 注意事项

  • 代理仅在开发环境中生效，生产环境中需要配置服务器（如 Nginx）来处理跨域问题。
  • 如果后端服务器支持 CORS（跨域资源共享），也可以直接在后端配置 CORS 头，而不需要代理。
发表新评论