vue 크로스 필드 해결 기록

오 랜 만 입 니 다.오늘 쓰 고 싶 은 것 은 얼마 전에 만 났 던 작은 문제 입 니 다.사실 이야기 배경 은 전단 의 친구 들 이 나 에 게 전단 에서 내 백 엔 드 의 데 이 터 를 요청 할 수 없다 고 말 하고 도 메 인 을 넘 었 다 고 말 했다.
사실 도 메 인 을 뛰 어 넘 는 문 제 는 현재 앞 뒤 엔 드 시대 에 흔히 볼 수 있 습 니 다.그림 이 편리 하 다 면 백 엔 드 의 요청 과 차단기 에 header 를 설정 하지만 일부 업무 수 요 는 단순 한 백 엔 드 로 해결 할 수 없습니다.아니면 전단 이 스스로 처리 해 야 하 는 지,이번에 부 딪 힌 것 은 전단 이 스스로 처리 해 야 하 는 상황 이다.
여기 서 나 는 도 메 인 을 뛰 어 넘 는 해결 방안 을 자세히 말 하지 않 고 내 가 어떻게 해결 하 는 지 만 이야기 했다.더 자세 한 크로스 오 버 지식 을 알 고 싶다 면 주문 해서 보 세 요!나 는 다음 에 주 제 를 하나 쓸 것 이다.
vue 크로스 에이전트 솔 루 션

사실 수 요 는 비교적 간단 합 니 다.먼저 post 시 뮬 레이 션 으로 B 서버 에 로그 인 한 다음 에 get 요청 B 서버 에 인터페이스 데 이 터 를 지정 하여 A 서버 에 되 돌려 주 는 것 입 니 다.
물론 이곳 의 A 서버 는 현재 내 컴퓨터 에 있다.
우선,루트 디 렉 터 리 에 vue.config.js 를 설정 해 야 합 니 다.이 파일 은 항목 마다 있 는 것 이 아 닙 니 다.없 으 면 스스로 설정 할 수 있 습 니 다.vue 홈 페이지 에 따 르 면 이 파일 은 선택 가능 한 설정 입 니 다.프로젝트 의(package.json 과 같은 등급 의)루트 디 렉 터 리 에 이 파일 이 존재 하면@vue/cli-service 에서 자동 으로 불 러 옵 니 다.
이 파일 안에 무엇이 있 는 지 구체 적 으로 설정 되 어 있 습 니 다.홈 페이지 의 주 소 를 알려 드 리 겠 습 니 다.
https://cli.vuejs.org/zh/config
홈 페이지 에 서 는 매개 변수의 설정 을 상세 하 게 소개 하고 있 습 니 다.물론 우리 가 필요 로 하 는 것 은 어떤 매개 변 수 를 가지 고 설정 할 수 있 습 니 다.여기 서 저 는 인터넷 에서 비교적 전면적 인 vue.config.js 를 찾 았 습 니 다.여러분 은 직접 복사 해서 붙 여 넣 으 면 됩 니 다.

// vue.config.js     
//  vue.config.js      https://cli.vuejs.org/zh/config/#css-loaderoptions
//        ，        
module.exports = {
//              URL。
//      ，Vue CLI                      
//   https://www.my-app.com/。              ，                。  ，           https://www.my-app.com/my-app/，    baseUrl   /my-app/。
//baseUrl   Vue CLI 3.3     ，   publicPath
//baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
publicPath: process.env.NODE_ENV === "production" ? "./" : "/",

// outputDir:  npm run build   yarn build   ，         （  baseUrl         ）
outputDir: "mycli3",
//            (js、css、img、fonts)  ；（      ，             ）
assetsDir: "assets",
//      index.html       (    ，       index.html    )
// indexPath: "myIndex.html",
//     ，                   hash          。             false         。(false               )
filenameHashing: false,

//  lintOnSave：{ type:Boolean default:true }       eslint
lintOnSave: true,
//              eslint-loader，        
// lintOnSave: process.env.NODE_ENV !== 'production',

//              Vue     。    true        Vue       template    ，              10kb   。(  false)
// runtimeCompiler: false,

/**
 *             source map，        false          。
 *       map    ，        ，   false      map  
 * map       ：     ，           ，       ，                     。
 *   map            ，              。
 * */
productionSourceMap: false,

//    webPack-dev-server     
devServer: {
  host: "localhost",
  port: 8081, //    
  https: false, // https:{type:Boolean}
  open: true, //         
  //       
  proxy: {
    "/apis": {
      target: "http://xxx.xx.xx.xx:xxxxx",//         
      ws: true,//     websockets
      changeOrigin: true, //    ：             ，         ，          ，                        
      pathRewrite: {
        '^/apis': '' //      '/api'  target     ,      'http://40.00.100.100:3002/user/add'，   '/api/user/add'  
      }
    }
  }
}
};

물론,우 리 는 이렇게 많은 설정 이 필요 하지 않 을 수도 있 습 니 다.여기 서 우 리 는 주로 이 코드 를 보 겠 습 니 다.

devServer: {
   host: "localhost",
   port: 8081, //    
   https: false, // https:{type:Boolean}
   open: true, //         
   //       
   proxy: {
     "/apis": {
       target: "http://xxx.xx.xx.xx:xxxxx",//         
       ws: true,//     websockets
       changeOrigin: true, //    
       pathRewrite: {
         '^/apis': '' //      '/api'  target     ,      'http://40.00.100.100:3002/user/add'，   '/api/user/add'  
       }
     }

이 곳 은 프 록 시 를 설정 하 는 곳 입 니 다.웹 팩 템 플 릿 을 사용 하여 구축 한 vue 프로젝트 라면 이 프로필 은 config/index.js 입 니 다.사실은 기능 이 유사 합 니 다.
proxy 필드 에서 target 은 우리 가 도 메 인 을 넘 어야 하 는 url 입 니 다.pathRewrite 의^/apis 는 target 에서 작성 한 url 을 대체 하 는 것 입 니 다.무슨 뜻 입 니까?아래 를 계속 볼 수 있 습 니 다.

this.$axios({
  method: "POST",
  url: `/apis/login`,
  headers: {
   'Content-Type': 'application/x-www-form-urlencoded'
  },

  data: {
       "email": "xxxxxxx",
       "password": "xxxxxxx",
       "remember": "on"
      },
  withCredentials: true,

 })

위의 url 에서 내 가 쓴 것 은/apis/login 이지 만 실제로 요청 한 것 은?http://xxx.xx.xx.xx:xxxxx/login。즉,apis 는 target 의 url 을 대체 하여 vue 에 게 대리 가 필요 하 다 는 것 을 알 릴 수 있 습 니 다.
사실 이곳 에 와 서 도 메 인 을 뛰 어 넘 는 문 제 는 이미 해결 되 었 습 니 다.다시 요청 할 때 도 메 인 을 뛰 어 넘 는 오 류 를 보고 하지 않 은 것 을 발견 할 수 있 습 니 다.
그러나 새로운 오류 가 있 을 수 있 습 니 다.만 나 지 않 을 수도 있 지만 만 날 수도 있 습 니 다.이것 은 백 엔 드 에서 데 이 터 를 받 아들 이 는 형식 과 관련 이 있 습 니 다.
axios 의 폼 데 이 터 를 form-data 형식 으로 변환 합 니 다.
만약 당신 이 form-data 형식 이 아니라면 400 의 오 류 를 만 날 수 있 습 니 다.400 오 류 는 인터넷 에 따 르 면 콘 텐 츠-type 이 설정 되 어 있 지 않 은 것 입 니 다.그러나 이것 은 한편 일 뿐 입 니 다.다른 한편 으로 는 당신 이 전달 한 data 가 반드시 백 엔 드 와 일치 하 는 것 은 아 닙 니 다.
이 문 제 는 axios 설정 차단 기 를 통 해 해결 해 야 할 수도 있 습 니 다.
main.js 에서 다음 과 같이 설정 합 니 다.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './api'
import axios from 'axios'
import qs from 'qs'


Vue.config.productionTip = false
Vue.prototype.$axios = axios

axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
axios.defaults.headers.post["Access-Control-Allow-Origin"] = "*";
//      
axios.interceptors.request.use(
  config => {
   if (config.method === 'post') {
    config.data = qs.stringify(config.data);
   }
   return config;
  },
  error =>{
   return Promise.reject(error);
  }
);

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

총결산
이 글 은 도 메 인 을 뛰 어 넘 는 것 에 대해 전면적 이지 않 지만 이 방면 에 대해 곤 혹 스 러 워 하 는 학생 들 에 게 나 는 본 후에 문득 깨 닫 게 될 것 이 라 고 믿는다.크로스 필드 문제 의 사고 방향 은 전단 과 백 엔 드 두 가지 측면 에 불과 하 다.간단하게 테스트 해 보면 잠 금 문제 가 어디 에 있 는 지 알 수 있 습 니 다.만약 당신 이 이 문장 이 당신 에 게 지금 이나 이후 에 유용 하 다 고 생각한다 면,번 거 로 우 시 겠 지만,다시 한 번 지 지 를 보 여 주세요!
이상 은 vue 크로스 도 메 인 해결 에 대한 상세 한 내용 을 기록 하 는 것 입 니 다.vue 크로스 도 메 인 에 관 한 자 료 는 우리 의 다른 관련 글 에 관심 을 가 져 주 십시오!