如何将本地API与通过其他端口提供的Vue应用一起使用？

Question

我正在帮助某人启动并运行Django + Vue应用程序，我们遇到的一个问题是如何使Vue应用程序热重新加载，同时又能够与本地Django服务器交互。

在生产中，Django服务器将为Vue应用提供服务，npm run build将Vue应用的资产放入Django项目的templates/和static/文件夹中。

当我们运行Django服务器（python manage.py runserver）时，该服务器正在localhost:8000上运行。当我们运行npm run serve（以获取热重装的好处）时，将在localhost:8080上提供Vue应用程序。如果我从Vue应用向/exampleEndpoint发出GET请求，它将转到localhost:8080/exampleEndpoint，因此不会访问Django服务器。

将Vue应用程序与Django应用程序配合使用的正确方法是什么？

Answer 1

如果您正在使用axios，则可以执行以下操作：

axios.defaults.baseURL = '//localhost:8000/';

省略http / s并仅以双斜杠开头将使当前协议继承到url中。

只要您的所有请求URI都以一个斜杠开头，这将导致axios.post('/api/example')请求http（s）：// localhost：8000 / api / example。

编辑：您将需要允许CORS标头。为此，有一个软件包django-cors-headers。它非常易于使用并且可以正常运行：https://github.com/ottoyiu/django-cors-headers/

Answer 2

我们最终采用的解决方案（实际上并没有回答这个问题的标题，但是解决了根本问题）是不使用vue-cli热装服务器，而是对前端文件的触发器{{ 1}}，以便前端应用程序将由Django服务器提供服务（就像在生产环境中一样）。为此，我安装了“ npm-watch”软件包，并让“ npm run watch”监视npm run build目录中的所有.vue，.scss和.js文件。提交内容如下。