在顶部，我们需要引用Axios库。然后有一个新的方法 getrandomfrombackend 将使用Axios异步调用API和检索结果。最后， getrandom 方法现在应该使用 getrandomfrombackend 函数得到一个随机值。
保存文件，到浏览器，运行一个开发服务器再次刷新 localhost:8080 。你应该看到控制台错误没有随机值。但别担心，一切都正常。我们得到了 CORS 的错误意味着Flask服务器API默认会关闭其他Web服务器（在我们这里，vue.js App是在 Node.js服务器上运行的应用程序）。如果你 npm run build 项目，那在 localhost:5000 （如Flask服务器）你会看到App在工作的。但是，每次对客户端应用程序进行一些更改时，都创建一个包并不十分方便。
让我们用打包了CORS插件的Flask，将使我们能够创建一个API访问规则。插件叫做FlaskCORS，让我们安装它：
(venv) pip install -U flask-cors
你可以阅读文档，更好的解释你要使你的服务器怎么样使用CORS。我将使用特定的方法，并将**{“origins”: “*”}**应用于所有/api/*路由（这样每个人都可以使用我的API端）。在run.py加上：
from flask_cors import CORS app = Flask(__name__, static_folder = "./dist/static", template_folder = "./dist") cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
有了这种改变，您就可以从前端调用服务端。
更新:
事实上，如果你想通过Flask提供静态文件不需要CORS。感谢Carson Gee的下面的这一招。
这个主意是这样的。如果应用程序在调试模式下，它只会代理我们的前端服务器。否则（在生产中）只为静态文件服务。所以我们这样做：
import requests @app.route('https://www.jb51.net/', defaults={'path': ''}) @app.route('/<path:path>') def catch_all(path): if app.debug: return requests.get('http://localhost:8080/{}'.format(path)).text return render_template("index.html")
很优雅的魔法:sparkles:！
现在有了一个完整的全栈**（full-stack） 应用程序，用您最喜爱 Vue.js 和 Flask**技术构建。
后记
最后，我想就如何改进这个解决方案谈几句话。
首先利用CORS，如果你想让你的API端访问外部的服务器。否则的话只需要使用代理服务器与前端开发技巧。
另一个改进是避免客户端硬编码API路由。也许你需要考虑一些API端点的字典。因此，当您更改API路由时，只需刷新一个字典即可。前端仍然有一个有效的端点。
通常在开发过程中，你将至少有2个终端窗口：一个是Flask和另一个是vue.js。在生产中可以摆脱Vue而只单独运行Node.js服务器。