이번에는 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 중국어 웹사이트의 다른 관련 기사도 주목하세요!JS는 어떻게 별이 빛나는 네비게이션 바를 구현합니까?
vue와 vue-i18n이 배경 데이터의 다중 언어 전환을 구현하는 방법
위 내용은 vue에서 도메인 간 처리를 위해 axios를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!