时间戳

首页 > 解决方案 > 将数据从 Flask 传递到 Vue 而不请求它

javascript - 将数据从 Flask 传递到 Vue 而不请求它

问题描述

我正在尝试使用 Vue 制作一个通用且模块化的单页应用程序，该应用程序没有任何硬编码的 IP 地址来请求后端（Flask），因此它可以与任何后端一起使用，而无需更改源代码并重新编译它。

是否可以在没有前端请求的情况下将数据（在这种情况下是后端运行的 IP 和端口）从后端传递到前端？如果前端必须请求初始应用程序数据，它已经需要一个硬编码的 IP 地址到后端，这违背了我想要做的事情的目的。

在渲染前端时，我正在考虑将数据（后端地址）从后端传递到前端，然后在前端收集地址并使用它向后端发出进一步的请求。

我对 VueJS 和 Flask 还很陌生，所以我只是好奇。我也尝试过谷歌搜索，但没有找到任何东西——可能是因为我不知道如何正确表达这个问题。

这样的事情有可能吗，还是我生活在一个梦想的世界里？

标签： javascriptvue.js

解决方案

是否可以在没有前端请求的情况下将数据（在这种情况下是后端运行的 IP 和端口）从后端传递到前端？

<html>
 <head>
   <!-- this script makes eg. the "api" variable available globally -->
   <script src="./api_urls.js"/>
 </head>
</html>

然后在前端的静态文件中- 在 index.html 旁边添加这个文件：（不要在你的后端托管这个文件 - 因为这违背了你的要求）

// api_urls.js
window.api = { url: 'https://192.168.31.35:8080' }

然后在您的 Vue 应用程序中，您可以执行例如。

<!-- App.vue -->
<script>
export default {
  data() {
    puppy: null,
  },
  mounted() {
    axios.get(`${window.api.url}/api/puppies/123`)
     .then(data => { this.puppy = data.response }
  }
}
</script>

或者您可以在创建 Axios 实例时只使用 window.api.url

如果你有一个 API url 注入process.env.VUE_APP_API- 如此硬编码 - 这是你试图避免的，你必须更新 env 文件然后运行npm run build​​.

不过，使用上述方法，您只需转到包含静态文件（index.html等）的文件夹，编辑api_urls.js、保存，任何访问该站点的人都会立即向新 URL 发送请求。

我认为这里有一些安全隐患。如果有人使用 XSS 替换window.api您{ api: 'https://evilwebiste.com/muhahaha'}的用户，他们会将他们的密码和登录信息发送到该网站。我记得我的架构师说过我们有一个严格的内容安全策略（浏览器功能）可以防止这样的事情发生。不能多说。

推荐阅读