不同Flask微服务之间实现页面重定向的方法咨询

你可以根据技术栈选择后端处理或者前端处理的方案，以下是可落地的具体实现：

一、后端Flask实现方案（更推荐，便于统一管理） #

1. 统一网关路径路由（适配AWS部署最优方案） #

部署到AWS时，给所有微服务配置统一的应用负载均衡器(ALB)作为入口，配置ALB路径路由规则：例如/service-a/*转发到微服务A的目标组，/service-b/*转发到微服务B的目标组。本地开发时也可以用Nginx做反向代理实现相同的路径规则。
此时所有服务对外使用同一个域名，跳转时直接用相对路径即可，完全不需要硬编码任何域名、端口：

from flask import Flask, redirect, request
app = Flask(__name__)

@app.route('/form', methods=['POST'])
def handle_form():
    # 处理表单提交逻辑
    # 直接使用相对路径跳转，本地和AWS环境代码完全一致
    return redirect("/service-b/anotherPage")

2. 环境变量配置法 #

如果不想搭建统一网关，可以把各微服务的地址存在环境变量中，本地和AWS部署时分别配置对应环境的参数即可，无需修改业务代码：

• 本地开发时配置环境变量：export SERVICE_B_URL=http://localhost:8001
• AWS部署时在ECS/EC2/Lambda的环境变量配置中，把SERVICE_B_URL的值修改为对应微服务的线上访问地址
  代码示例：

import os
from flask import Flask, redirect, request

app = Flask(__name__)
# 读环境变量，第二个参数为本地开发默认值
SERVICE_B_URL = os.getenv("SERVICE_B_URL", "http://localhost:8001")

@app.route('/form', methods=['POST'])
def handle_form():
    # 处理表单逻辑
    return redirect(f"{SERVICE_B_URL}/anotherPage")

3. AWS服务发现集成 #

如果你的微服务是用AWS ECS、EKS等容器编排服务部署，可以直接集成AWS Cloud Map服务发现功能，通过服务名直接解析到对应微服务的访问地址，无需手动维护环境变量。

二、前端JavaScript实现方案 #

1. 全局配置文件法 #

单独维护一个全局配置文件，不同环境使用对应版本的配置文件，部署时直接替换即可，无需修改业务逻辑：

1. 新增config.js配置文件：

// 本地开发配置，AWS部署时替换为对应线上地址即可
window.serviceConfig = {
  serviceBUrl: "http://localhost:8001"
}

2. 表单提交逻辑：

document.querySelector('#form').addEventListener('submit', async (e) => {
  e.preventDefault()
  // 提交表单到当前服务后端
  await fetch('/form', {
    method: 'POST',
    body: new FormData(e.target)
  })
  // 读取配置跳转至另一微服务页面
  window.location.href = `${window.serviceConfig.serviceBUrl}/anotherPage`
})

2. 后端返回跳转地址 #

跳转地址统一由后端管理，前端提交表单后读取接口返回的跳转地址直接跳转，无需前端维护服务地址配置：
后端返回示例：

from flask import jsonify, request
@app.route('/form', methods=['POST'])
def handle_form():
    # 处理表单逻辑
    return jsonify({
        "code": 0,
        "redirect_url": f"{SERVICE_B_URL}/anotherPage"
    })

前端逻辑：

document.querySelector('#form').addEventListener('submit', async (e) => {
  e.preventDefault()
  const res = await fetch('/form', {
    method: 'POST',
    body: new FormData(e.target)
  }).then(r => r.json())
  window.location.href = res.redirect_url
})

内容的提问来源于stack exchange，提问作者Devious