Как использовать локальный API с приложением Vue на другом порту?

Question

Я помогаю кому-то запустить и запустить приложение Django + Vue, и одна из проблем, с которой мы сталкиваемся, заключается в том, как выполнить горячую перезагрузку приложения Vue, а также иметь возможность взаимодействовать с локальным сервером Django.

В производственном процессе сервер Django будет обслуживать приложение Vue, а npm run build помещает ресурсы приложения Vue в папки templates/ и static/ проекта Django.

Когда мы запускаем сервер Django (python manage.py runserver), сервер работает на localhost:8000.Когда мы запускаем npm run serve (чтобы воспользоваться преимуществами горячей перезагрузки), приложение Vue обслуживается на localhost:8080.Если я выполняю запрос GET из приложения Vue на /exampleEndpoint, он переходит на localhost:8080/exampleEndpoint, таким образом, не затрагивая сервер Django.

Как правильно использовать приложение Vue с приложением Django?

Answer 1

Решение, которое мы в итоге решили (которое на самом деле не отвечает на заголовок этого вопроса, но решает основную проблему), заключалось в том, чтобы не использовать сервер горячей перезагрузки vue-cli, а внести изменения в триггер файлов внешнего интерфейса npm run build, чтобы интерфейсное приложение обслуживалось сервером Django (как это было бы в производстве). Для этого я установил пакет «npm-watch» и попросил «npm run watch» просмотреть все файлы .vue, .scss и .js в каталоге /src. Коммит ниже.

Answer 2

Если вы используете axios, тогда вы можете сделать:

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

Если вы пропустите http / s и просто начнете с двойной косой черты, текущий протокол будет унаследован в URL.

Thisв результате axios.post('/api/example') будет запрашивать http (s): // localhost: 8000 / api / example, если все URI вашего запроса начинаются с одной косой черты.

Редактировать: вам потребуется разрешить заголовки CORS.Для этого есть пакет django-cors-headers.Он очень прост в использовании и отлично работает: https://github.com/ottoyiu/django-cors-headers/