집 > 기사 > 웹 프론트엔드 > vue에서 도메인 간 처리를 위해 axios를 사용하는 방법

vue에서 도메인 간 처리를 위해 axios를 사용하는 방법

php中世界最好的语言원래의: 2018-03-28 15:19:586252검색

이번에는 vue에서 크로스 도메인 처리를 위해 axios를 사용하는 방법을 보여드리겠습니다. vue에서 크로스 도메인 처리를 위해 axios를 사용할 때 주의 사항은 무엇입니까?

크로스 도메인은 매우 당황스러운 문제입니다. 어떤 사람들은 백그라운드에서 요청 헤더를 설정할 수 있지만 많은 프런트 엔드는 백그라운드에 대한 지식이 없고 독립적으로 서버를 구축할 수 없기 때문에 당황스럽습니다. 물론 크로스 도메인 문제를 해결할 수 있는 가상 서버가 많이 있는데, 그 본질은 크로스 도메인 문제를 완곡하게 해결하기 위해 백그라운드를 통해 백엔드와 통신하는 것이므로 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': '/' 
  } 
  }

가 구성되었습니다. 우리의 객체 서버는 우리의 가상 서비스가 해당 웹사이트에 접근할 수 있도록 해줍니다. 물론 이것은 webpack의 기능이므로 개발 환경에서만 사용할 수 있습니다. 게시물을 예로 들어보겠습니다.

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("上传失败") })
			}
		},

이게 도대체 뭐죠.$http? ? ?

이것은 당연히 main.js에 axios를 도입한 결과이지만 vue의 플러그인이 아니기 때문에 use 메소드를 직접 사용할 수 없으므로 프로토타입 체인에 로드해야 합니다

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

이런 식으로 우리는 그것을 직접 사용할 수 있습니다.

이것은 내 친구의 링크이고 업로드된 이미지 파일에 대한 링크를 선택했습니다

참고:

1. webpack 이 방법은 개발 환경에서만 사용하기에 적합합니다. 2. inde.js 내부에서 dev를 설정할 때 설정해야 할 도메인 이름이 너무 많으면 주의하세요. 유효하지 않으므로 www여야 합니다. 바이두. com

3. axios를 사용하여 파일을 업로드하세요.

images

를 업로드하기 위해 ajax와 같은 formdata를 사용할 필요는 없습니다. 이 기사의 사례를 읽은 후 해당 방법을 익히셨다고 생각합니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목하세요!