React和Flask不共用端口的一个常见方法是使用不同的端口分别运行它们，然后使用代理将它们连接起来。在开发环境中，您可以配置React的开发服务器（使用create-react-app创建的React应用）代理请求到Flask服务器。生产环境中，您可以使用Nginx等反向代理服务器来处理这种情况。
开发环境配置
在开发环境中，您可以在React项目的package.json文件中添加一个proxy字段，将API请求代理到Flask服务器。
步骤如下：
-
确保React和Flask在不同端口运行
- React开发服务器默认运行在
3000端口。 - Flask服务器可以在
5000端口运行。
- React开发服务器默认运行在
-
在React项目的
package.json中添加proxy字段
在package.json中添加以下字段：
"proxy": "http://localhost:5000"
启动Flask服务器
确保您的Flask应用运行在5000端口。可以通过以下命令启动：
export FLASK_APP=app.py
export FLASK_ENV=development
flask run --port 5000
启动React开发服务器
在React项目的根目录下运行：
npm start
现在，当您在React应用中发出API请求时，例如使用axios.get('/api/orders')，React开发服务器会自动将这些请求代理到运行在5000端口的Flask服务器。
生产环境配置
在生产环境中，通常会使用Nginx等反向代理服务器来管理前后端的请求。
Nginx配置示例
假设您的React应用已经打包（使用npm run build命令），并且打包后的文件存储在服务器上的某个目录中，以下是一个Nginx配置示例：
server {listen 80;server_name your_domain.com;location / {root /path_to_your_react_build;try_files $uri /index.html;}location /api/ {proxy_pass http://localhost:5000;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}
在这个配置中：
- Nginx会处理根路径（
/）的请求并返回React应用的静态文件。 - 对
/api/路径的请求会被代理到运行在5000端口的Flask服务器。
通过上述配置，React和Flask可以在不同的端口运行，且开发和生产环境都可以正常工作。开发环境使用React开发服务器的代理功能，生产环境使用Nginx等反向代理服务器。
