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

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

在生产中，Django服务器将为Vue应用程序提供服务，

npm run build

将Vue应用程序的资产放在Django项目的

模板/

和

静态/

文件夹中

当我们运行Django服务器（

python manage.py runserver

）时，服务器运行在

localhost:8000

。当我们运行

npm run serve

（以获得热重新加载的好处）时，Vue应用程序正在

localhost:8080

上运行。如果我从Vue应用程序向

/exampleEndpoint

发出GET请求，它将转到

localhost:8080/exampleEndpoint

，因此不会命中Django服务器

---

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

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

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

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

这将导致

axios.post（'/api/example'）

请求http://localhost:8000/api/example，只要所有请求URI都以一个斜杠开始

---

编辑：您需要允许CORS标题。有一个包

django cors headers

用于此。它非常易于使用，而且工作正常：

我们最终采用的解决方案（它并没有真正回答这个问题的标题，但解决了根本问题）是不使用vue cli热重新加载服务器，而是对前端的文件触发器进行更改

npm run build

，因此，前端应用程序将由Django服务器提供服务（就像在生产中一样）。为此，我安装了“npm watch”包，并在

/src

目录中安装了“npm run watch”监视所有.vue、.scss和.js文件。下面是提交

---

您能提供一份详细的报告吗？如果没有代码和堆栈，很难提供任何帮助trace@MikeTung这是针对Django+Webpacked vue cli项目的，在我看来，一个最小的示例可能涉及几十个文件。如果我写的东西不清楚，请告诉我。在开发或更好地为nginx提供服务时，请向

：8000/exampleEndpoint

发出请求，并让nginx将请求路由到正确的进程。为什么您首先要使用Django为Vue应用程序提供服务？您可以完全遵循拆分后端和前端的基本原则。像往常一样供应Django和Vue。G通过Node Express，在Django中使用RESTful API使数据可供Vue使用（例如，通过Axios）。@NathanWailes如果您在某些事情上投入了时间和精力，请正确地进行。使用Django为Vue SPA服务就像在汽车顶部安装方向盘来控制方向盘一样。您还可以在

Vue.config.js

中配置devserver代理以防止跨源资源共享（CORS）问题，但您没有提到这一行的位置“axios.defaults.baseURL=”//localhost:8000/“”？？这是一份不完整的文件answer@NitinNanda对于这一点，法规中没有一个答案，我应该把它放在哪里，这取决于您如何实现axios，如果您使用的是脚本包含、es6导入或多个实例，那么这些因素将改变您需要放在哪里。。。这个答案为您指出了所需设置的方向，您可能需要解决一个基本URL问题，而不是如何实现它，在这里，您需要为您的特定用例找出答案，或者就如何在您的用例中使用它问一个单独的问题。适当的方法是IMO按照@thibautg所说的，使用一个。