다른 포트에서 제공되는 Vue 앱과 함께 로컬 API를 사용하는 방법

다른 포트에서 제공되는 Vue 앱과 함께 로컬 API를 사용하는 방법

Django + Vue 앱의 셋업 및 실행을 돕고 있는데, Vue 앱을 핫 새로고침하면서 로컬 Django 서버와 대화하는 방법이 있습니다.

프로덕션에서는 Django 서버가 Vue 앱을 제공하고,npm run buildVue 앱의 자산을 Django 프로젝트의 자산으로 이동합니다.templates/그리고.static/폴더.

Django 서버를 실행할 때(python manage.py runserver), 서버가 동작하고 있습니다.localhost:8000달리기를 할 때npm run serve(핫 새로고침의 이점을 얻기 위해) Vue 앱은 다음 위치에서 제공됩니다.localhost:8080Vue 앱에서 GET 요청을 하면/exampleEndpoint로 이동합니다.localhost:8080/exampleEndpoint따라서 Django 서버에 접속하지 않습니다.

Vue 앱을 Django 앱과 함께 작동시키는 적절한 방법은 무엇입니까?

Axi를 사용하는 경우 다음을 수행할 수 있습니다.

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/

최종적으로는 vue-cli 핫 새로고침 서버를 사용하지 않고 프런트 엔드의 파일 트리거를 변경하는 솔루션(이 질문의 제목에 실제로 대응하지는 않지만 근본적인 문제를 해결함)을 채택했습니다.npm run build프런트 엔드 앱은 (제작 시처럼) Django 서버에 의해 제공됩니다.이를 위해 "npm-watch" 패키지를 설치하고 "npm run watch"를 실행하여 모든 .vue, .scss 및 .js 파일을 감시합니다./src디렉토리로 이동합니다.커밋은 다음과 같습니다.

언급URL : https://stackoverflow.com/questions/53265770/how-to-use-a-local-api-with-a-vue-app-served-at-a-different-port