vue 프로젝트 에서 axios 크로스 필드 처리 사용

도 메 인 을 뛰 어 넘 는 것 은 매우 난감 한 문제 이다.어떤 사람들 은 배경 에서 요청 헤드 를 설정 할 수 있 지만 많은 전단 지 는 배경 지식 을 갖 추 지 못 하고 스스로 서버 를 만 들 지 못 해서 난처 한 일이 되 었 다.
물론 많은 가상 서버 가 있 습 니 다.크로스 도 메 인 문 제 를 해결 할 수 있 습 니 다.그들의 실질 은 모두 배경 을 통 해 백 스테이지 와 소통 하여 크로스 도 메 인 문 제 를 완곡 하 게 해결 하 는 것 이 좋 습 니 다.webpack 은 바로 이런 기능 을 가지 고 있 기 때문에 vue-cli 도 크로스 도 메 인 문 제 를 해결 하 는 능력 이 있 습 니 다.
물론 ajax 를 직접 보 내 면 성공 할 수 는 없습니다.그 렇 죠?설정 파일 을 수정 해 야 합 니 다.

코드:

dev: {
		env: require('./dev.env'),
		port: 8080,
		autoOpenBrowser: false,
		assetsSubDirectory: 'static',
		assetsPublicPath: '/',
		proxyTable: {
			'/gp': {
				target: 'http://we7.qw1000.cn/',
				changeOrigin: true,
				pathRewrite: {
					'^/gp': '/'
				}
			}
		}
	}

이것 은 일반적인 템 플 릿 으로 주로 몇 가지 개념 과 관련된다.
dev,자 연 스 럽 게 가상 서버 라 는 뜻 입 니 다.

autoOpenBrowser 

중요 한 속성 도 아 닙 니 다.브 라 우 저 를 자동 으로 열 수 있 는 지 설정 하 는 것 이 관건 입 니 다.

proxyTable: { 
  '/gp': { 
  target: 'http://we7.qw1000.cn/', 
  changeOrigin: true, 
  pathRewrite: { 
   '^/gp': '/' 
  } 
  } 

우리 의 대상 서버 를 설정 하여 우리 의 가상 서비스 가 그 사 이 트 를 방문 하도록 합 니 다.물론 이것 도 웹 팩 의 기능 이기 때문에 개발 환경 에서 만 사용 할 수 있 습 니 다.
다음은 우리 ajax 코드 입 니 다.post 를 예 로 들 면:

methods: {
			hello: function(e) {
				var str;
				console.log(e.target.files[0]);
				var _this = this;
				var that = new FormData();
				that.append("myfile", e.target.files[0]);
				this.$http.post('gp/app/index.php?i=2&c=entry&do=tool/image&m=qw_deal', that)
					.then(function(sures) { console.log(sures);
						console.log("    ") })
					.catch(function(catchres) { console.log(catchres);
						console.log("    ") })
			}
		},

this.$http 는 무슨 귀신 입 니까??
이것 은 당연히 우리 가 main.js 에서 axios 를 도입 한 결과 이다.그러나 우 리 는 use 방법 을 직접 사용 할 수 없다.왜냐하면 그 는 vue 의 플러그 인 이 아니 기 때문에 원형 체인 에 불 러 와 야 한다.

import axios from 'axios';
Vue.prototype.$http = axios;

이렇게 하면 우 리 는 직접 사용 할 수 있 고,

이것 은 제 친구 쪽 의 링크 이 고 제 가 선택 한 것 은 올 린 이미지 파일 의 링크 입 니 다.
주의 점:
1.webpack 의 크로스 도 메 인 해결 방법 은 개발 환경 에서 만 사용 하기에 적합 합 니 다.
2.inde.js 내부 의 dev 를 설정 할 때 도 메 인 이름 을 설정 해 야 합 니 다.너무 많 으 면 효력 이 없 기 때문에 ww 일 것 입 니 다.baidu。com
3.axios 를 사용 하여 파일 을 업로드 합 니 다.ajax 가 그림 을 업로드 하 는 것 처럼 formdata 를 사용 할 필요 가 없습니다.
이상 의 이 편 은 vue 프로젝트 에서 axios 크로스 도 메 인 처 리 를 사용 하 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.