python - 如何将本地 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（为了获得热重载的好处），Vue 应用程序在localhost:8080. 如果我从 Vue 应用程序向 GET 请求/exampleEndpoint，它会转到localhost:8080/exampleEndpoint，因此不会访问 Django 服务器。

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

标签： pythondjangovue.jsvuejs2vue-cli

Answer 1

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

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

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

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

编辑：您将需要允许 CORS 标头。有一个包django-cors-headers。它非常易于使用并且工作得很好：https ://github.com/ottoyiu/django-cors-headers/