如何在JavaScript中获取Flask服务端路由的返回内容

第一步：Flask 端配置（解决跨域问题） #

如果你的前端代码和Flask服务不在同一个域名/端口下（比如前端跑在http://localhost:5500，Flask跑在http://localhost:5000），需要先配置跨域支持，避免浏览器拦截跨域请求：

1. 安装跨域依赖：pip install flask-cors
2. 调整后的Flask代码：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app) # 全局开启跨域支持

@app.route('/')
def home():
    return "Homepage!"

if __name__ == '__main__':
    app.run()

第二步：JavaScript 端代码实现 #

你原来使用window.open()的方式无法直接获取响应内容，该方法只会打开新的浏览器窗口，返回的窗口对象不存在content属性。正确做法是使用Fetch API发送HTTP请求获取内容：

// 同域部署可直接写相对路径，跨域部署填写完整的Flask服务地址
fetch('http://flaskwebpage.com/')
  .then(response => response.text()) // 将响应内容转为文本格式
  .then(content => {
    console.log(content); // 控制台输出 Homepage!
  })
  .catch(error => {
    console.error('请求出错：', error);
  });

如果你偏好async/await写法，也可以用下面的实现：

async function getFlaskContent() {
  try {
    const response = await fetch('http://flaskwebpage.com/');
    const content = await response.text();
    console.log(content);
  } catch (error) {
    console.error('请求出错：', error);
  }
}
// 调用函数触发请求
getFlaskContent();

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