Vue 프로젝트 구성 다중 도메인 액세스 및 프록시 설정 방법

vue 단일 페이지 응용 프로그램 개발을 할 때 백엔드를 요청하는 것을 피할 수 없습니다. 이 때 크로스 필드 문제가 발생합니다.2가지 일반적인 솔루션
백엔드 설정으로 도메인 간 액세스 허용
프런트엔드에서 에이전트를 통해 백엔드에 액세스
다음은 vue-cli 프록시 액세스를 설정하는 방법에 대해서만 설명합니다.
vue-cli 에이전트
가장 간단한 것은 vue conifg를 설정하여 실현하는 것이다
다음과 같이 요청된 3개의 백엔드를 구성합니다.
요청하다http://localhost:4201/adminapi/* 요청을 대행합니다.http://localhost:8180/*
요청하다http://localhost:4201/portalapi/* 요청을 대행합니다.http://localhost:8185/*
요청하다http://localhost:4201/securityapi/* 요청을 대행합니다.http://localhost:8089/*
vue-cli는 웹 팩을 기반으로 하기 때문에 웹 팩의 devServer 옵션은 모두 설정을 지원합니다

module.exports = {
 // ...
 devServer: {
   port: 4201,
   proxy: {
    '/adminapi': {
     target: 'http://localhost:8180',
     ws: true,
     changeOrigin: true,
     pathRewrite: {
      '^/adminapi': ''
     }
    },
    '/portalapi/': {
     target: 'http://localhost:8185/',
     ws: true,
     changeOrigin: true,
     pathRewrite: {
      '^/portalapi': ''
     }
    },
    '/securityapi/': {
     target: 'http://localhost:8089/',
     ws: true,
     changeOrigin: true,
     pathRewrite: {
      '^/securityapi': ''
     }
    }
   },
   disableHostCheck: true, //  webpack-dev-server ， hostname， hostname  ， 。
 },
 //...
}

Nodejs 중간 라우팅
nodejs와 프레임워크 express로 요청을 전송할 수 있습니다.
생산 환경에서nginx 설정 역방향 에이전트를 사용하지 않을 수 있습니다.
방안은 각각 이해득실이 있고 기술 구조를 선택할 때 자신의 프로젝트 환경을 겨냥해야 하며 자신의 팀에 맞는 것이 가장 좋다.
백엔드 도메인 간 액세스
백엔드의 크로스 도메인 액세스 설정도 비교적 간단하고 언어별 JAVA PHP Python Go 설정도 대동소이하다.
조회해 보면 비교적 많은 자료가 있지만 생산 환경에서 안전을 위해 크로스 도메인 접근을 허용하거나 크로스 도메인을 허용하는 IP를 설정하지 않는 것을 권장합니다
추가 정보: Vue 필터 filter 호출 데이터, methods 중 오류 발생
오늘 필터를 배웠어요. 필터링 방법을 methods에 넣었는데 어떻게 호출해도 이 기능이 없다고 하더라고요.
그리고 제가 로그를 해봤는데 이this가 가리키는 게 윈도우더라고요.
그래서 인터넷에서 다음과 같은 해결 방법을 찾았다.
글로벌 변수를 정의합니다.
let that;
beforeCreate 생명주기에this를that에 부여하고that를 통해 획득

var vm = new Vue({
  el: '#app',
  data: {
  },
  beforeCreate: function () {
    that = this
  },
  methods:{
   fom(fmt){
    ...
   }
  },
  ....,
  filters: {
       dateformate: function (val) {
         return that.fom("yyyy-MM-dd")
       }
     }
  })

이상의 이 Vue 프로젝트 설정 크로스 액세스 및 에이전트 프록시 설정 방식은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.