vuecli 3 의 에이전트 가 만 나 는 구 덩이 를 설정 합 니 다.
먼저 제 가 이해 하 는 프 록 시 를 말씀 드 리 겠 습 니 다. 이 프 록 시 의 주요 기능 은 도 메 인 문 제 를 피 하 는 것 입 니 다. 물론 이 문제 의 발생 은 전단 의 방식 으로 도 메 인 문 제 를 피 하 는 디 버 깅 입 니 다. 포장 한 후에 도 프 록 시 문제 가 발생 할 수 있 습 니 다. 만약 에 포장 한 전단 과 백 엔 드 코드 가 같은 서버 에 없 으 면그러면 nginx 등 방식 으로 도 메 인 을 넘 는 것 을 피해 야 할 수도 있 습 니 다. 상대 적 으로 저 는 도 메 인 문 제 를 비교적 싫어 합 니 다.vuecli 에서 프 록 시 모델 을 제 공 했 습 니 다. 주요 한 사고방식 은 바로 현지에서 가상 nodejs 서 비 스 를 구축 하 는 것 입 니 다. 당신 의 인 터 페 이 스 는 nodejs 의 가상 서버 를 방문 한 다음 에 가상 서버 를 통 해 실제 인 터 페 이 스 를 방문 하 는 것 입 니 다. 여 기 는 nodejs 를 중간 부품 으로 삼 아 크로스 필드 문제 의 발생 을 피 할 수 있 습 니 다.
기본 설정
우선, vuecli 3 / 4 에 cli 2 의 / config / index. js 파일 이 없 기 때문에 src 디 렉 터 리 의 같은 단계 에서 vue. fonfig. js 파일 을 만 들 고 vue 에 대한 설정 을 해 야 합 니 다. 이 파일 을 직접 만 들 면 됩 니 다. 전 제 는 파일 이름 이 일치 하지 않 으 면 효과 가 없습니다. 이 파일 의 내용 은 vuecli 설정 에 비교적 높 은 우선 순위 가 있 기 때문에,여기 서 설정 한 속성 은 모두 최종 속성 이 될 수 있 습 니 다. 그러나 주의해 야 할 것 은 설정 하 는 과정 에서 일부 설정 은 개발 환경 과 온라인 환경 을 구분 하 는 것 일 수 있 습 니 다. 이 때문에 많은 시간 을 낭비 하지 마 세 요.설정 코드 를 같이 보 겠 습 니 다.
const path = require('path')
const webpack = require('webpack')
module.exports = {
filenameHashing: false,
lintOnSave: true,
// Vue
runtimeCompiler: false,
// babel-loader node_modules
transpileDependencies: [],
// sourceMap
productionSourceMap: true,
// All options for webpack-dev-server are supported
// https://webpack.js.org/configuration/dev-server/
devServer: {
open: false,
host: '0.0.0.0',
port: 8088,
https: false,
hotOnly: true,
disableHostCheck: true,
proxy: "http://www.baidu.com"
// proxy: {
// '/api': {
// target: 'http://www.baidu.com',
// ws:true,
// changeOrigin: true
// }
// }
},
};
위의 두 가지 설정 방식 은 상세 한 설정 을 사용 하 는 것 을 추천 합 니 다. 테스트 에 편리 하기 때문에 가장 중요 한 단 계 는 이 코드 가 수정 되면 vue 프로젝트 를 다시 시작 해 야 합 니 다. 그렇지 않 으 면 효력 이 발생 하지 않 습 니 다.
관련 Axios
일반적으로 위의 절 차 를 거치 면 당신 의 프로젝트 에 문제 가 생기 지 않 습 니 다. 하지만!하지만!!하지만!!!여전히 어린 친구 가 여기 서 크로스 필드 문 제 를 보고 합 니 다. 그러면 문제 가 발생 합 니 다. 사실은 크로스 필드 에서 시작 하 는 node 서버 가 시작 되 었 습 니 다. 여기 서 발생 하 는 크로스 필드 문 제 는 Axios 에 baseURL 을 설정 하기 때 문 일 수 있 습 니 다. proxy 는 당신 의 인 터 페 이 스 를 바 인 딩 된 target 서비스의 도 메 인 이름 으로 바 꿔 달라 고 요청 하기 때 문 입 니 다.그래서 여 기 는 axios 의 인터페이스 도 메 인 이름 을 설정 할 필요 가 없습니다. 본인 은 이것 때문에 많은 시간 을 낭비 하여 이 문 제 를 해결 하지 못 했 습 니 다.
axios 액세스 인터페이스 코드
this.$axios({
method:"post",
url:"/api/login",
data:{
"username":"***",
"password":"***"
}
}).
then((ok)=>{
console.log(ok)
},(err)=>{
console.log(err)
})
여기 서 실제 방문 의 인 터 페 이 스 는?http://www.baidu.com/api/login
pathRewrite:{
'^/api':''
}
일부 자 료 를 찾 은 어린이 신발 을 보면 낯 설 지 않 을 것 이 라 고 믿 습 니 다. 여기 서 저 는 개인 적 인 이 해 를 설명 하 러 왔 습 니 다. 이 물건 의 주요 기능 은 바로 이 도 메 인 이름 아래 의 인 터 페 이 스 를 분류 하 는 동시에 상기 경로 의 / api 로 대체 하 는 것 입 니 다.http://www.baidu.com/api이렇게 긴 필드 이기 때문에 '/ index' 를 추가 할 수 있 습 니 다.등의 인터페이스 분 류 는 어린이 신발 이 이 속성 을 설정 하지 않 더 라 도 영향 이 크 지 않 지만 자신 에 게 인 코딩 이 엄격 한 어린이 신발 이 라면 이 속성 을 살 펴 봐 야 코드 구조 와 조례 가 더욱 뚜렷 해 질 것 입 니 다.
설명 하 다.
이상 은 제 개인 적 인 이해 와 자신의 운영 절차 일 뿐 입 니 다. 모 르 거나 잘못된 내용 이 있 으 면 댓 글 을 환영 합 니 다. 제 가 본 첫 순간 에 수정 을 해서 참혹 한 참사 가 발생 하지 않도록 하 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JavaScript 의 원본 정책도 메 인 읽 기 동작 (Cross - origin reads) 을 허용 하지 않 습 니 다.하지만 내 장 된 자원 을 통 해 교묘 하 게 읽 기 접근 을 할 수 있다.예 를 들 어 포 함 된 그림 의 높이 와 너 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
