如何无需前端主动请求实现Flask向Vue传递后端服务地址数据

该需求完全可实现，你设想的「后端渲染前端页面时注入初始数据」是对应场景的通用标准方案，无需前端提前发起请求，也不存在硬编码后端地址的问题，具体实现步骤如下：

1. Flask 侧配置 #

你需要将Vue编译后的dist目录配置为Flask的静态资源和模板目录，在根路由返回HTML时，自动注入当前服务的访问地址到页面模板中：

from flask import Flask, render_template, request

app = Flask(
    __name__,
    static_folder="./dist/static", # 指向Vue打包后dist目录下的static文件夹
    template_folder="./dist" # 指向dist目录，用于读取index.html模板
)

@app.route('/')
def return_index():
    # 自动获取当前Flask服务的访问地址，无需硬编码
    backend_config = {
        "base_url": request.host_url.rstrip('/')
        # 可在此处追加其他需要传递给前端的初始化参数，比如环境标识、功能开关等
    }
    return render_template('index.html', backend_config=backend_config)

# 其他业务接口路由按原有逻辑正常开发即可

2. Vue 侧配置 #

首先修改Vue项目根目录下public/index.html模板文件，在<head>标签内插入全局变量注入的代码段：

<head>
  <!-- 原有其他meta、title、link标签保持不变 -->
  <script>
    // 接收Flask注入的配置，挂载到window全局对象上
    window.__BACKEND_CONFIG__ = {{ backend_config | tojson }}
  </script>
</head>

之后封装全局请求工具（以axios为例）时，直接读取全局变量作为接口请求前缀即可，无需硬编码后端地址：

// src/utils/request.js
import axios from 'axios'

const service = axios.create({
  // 直接使用注入的后端服务地址作为基础路径
  baseURL: window.__BACKEND_CONFIG__?.baseURL || '',
  timeout: 10000
})

// 可在此处追加请求/响应拦截器逻辑
export default service

注意事项 #

• 前端代码编译时不需要填写任何后端相关配置，编译出的dist包可以直接对接任意Flask服务，无需重新编译
• 该场景下用户访问的是Flask服务返回的前端页面，request.host_url会自动匹配用户实际访问的后端地址，不会出现跨域问题
• 仅可将非敏感的公开配置通过该方式注入，密钥、凭证类敏感数据不可写入全局变量

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