如何将本地 API 与在不同端口提供服务的 Vue 应用程序一起使用？

Question

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

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

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

让 Vue 应用程序与 Django 应用程序一起使用的正确方法是什么？

Answer 1

如果您使用的是 axios 那么您可以执行以下操作：

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

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

axios.post('/api/example')只要所有请求 URI 以单斜杠开头，这就会导致请求 http(s)://localhost:8000/api/example。

编辑：您需要允许 CORS 标头。有一个django-cors-headers用于此目的的包。它非常易于使用并且运行良好：https://github.com/ottoyiu/django-cors-headers/