vue2.0 axios 크로스 도메인 렌더링 문제에 대한 솔루션
- 亚连원래의
- 2018-05-31 16:36:201741검색
이제 vue2.0 axios 크로스 도메인 렌더링 문제에 대한 솔루션을 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.
(스캐폴딩 vue-cli 사용)
1단계: main.js에서 다음 선언을 사용합니다
import axios from 'axios'; Vue.prototype.$axios=axios;
그런 다음 다른 vue 구성 요소에서 this.$axios를 사용할 수 있습니다
Step 2: webpack
dev:
{
加入以下
proxyTable:
{
'/api':
{
target:
'http://api.douban.com',//设置你调用的接口域名和端口号
别忘了加http
changeOrigin:
true,
pathRewrite:
{
'^/api':
'/'//这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替
比如我要调用'http://api.douban.com/v2/movie/top250'，直接写‘/api/v2/movie/top250'即可
}
}
},
에서 ProxyTable(config 아래 index.js) 구성 3단계:
시도해 보세요. 교차 도메인은 성공했지만 참고하세요. 예, 이것은 단지 개발 환경(dev)에서 크로스 도메인 문제가 해결되었습니다. 실제 프로덕션 환경에서 서버에 배포하더라도 동일한 출처에서 나온 것이 아니라면 여전히 크로스 도메인 문제가 발생합니다. 배포된 3001은 프런트엔드와 백엔드의 공동 디버깅이 필요합니다. 1단계 프런트엔드의 경우 config/dev.env.js 및 prod.env.js에서 별도로 테스트할 수 있습니다. 즉, 개발/프로덕션 환경에서는 요청한 주소 API_HOST를 각각 구성합니다. 개발 환경에서는 위에서 구성한 프록시 주소 api를 사용하고, 프로덕션 환경에서는 일반 인터페이스 주소를 사용하므로 이렇게 구성합니다
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',//开发环境
API_HOST:"/api/"
})
module.exports = {
NODE_ENV: '"production"',//生产环境
API_HOST:'"http://api.douban.com"'
}
물론 개발 환경이든 프로덕션 환경이든 douban.com에서 직접 http://api를 요청할 수 있습니다. 구성 후 프로그램은 테스트 중에 현재 환경이 개발 환경인지 프로덕션 환경인지 자동으로 확인한 다음 모든 구성 요소에서 process.env.API_HOST를 사용하여
instance.post(process.env.API_HOST+'user/login', this.form)
과 같은 주소를 사용할 수 있습니다. 그런 다음 두 번째 단계 후에 최종 서버는 access-control-allow-origin인 cros cross-domain을 구성할 수 있습니다. *는 모든 액세스를 허용한다는 의미입니다. 요약하자면, 개발 환경에서 우리의 프런트엔드는 크로스 도메인에 대한 프록시를 구성할 수 있습니다. 실제 프로덕션 환경에서는 백엔드의 협력이 필요합니다. 어떤 전문가는 “이 방법은 ie9 이하에서는 사용하기 쉽지 않다. 호환성이 필요한 경우에는 백엔드의 서버 포트에 프록시를 추가하는 것이 가장 좋은 방법이다. 효과는 개발 시 웹팩 프록시와 유사하다”고 말했다.
4단계:
<template>
<p>
<ul>
<li v-for="item in movieArr">
<span>{{item.title}}</span>
</li>
</ul>
<button @click="sayOut">渲染</button>
</p>
</template>
<script>
export default {
data () {
return {
movieArr : []
}
},
methods: {
sayOut () {
this.$axios.get('/api/v2/movie/top250')
.then((response) => {
console.log(response.data.subjects)
this.movieArr = response.data.subjects // 这里要强调一下这个this 箭头函数指的是它的父级也就是vue实例 然后不用箭头函数的话 this是一个undefined 无法.movieArr来给他赋值 这里要注意一下 我被坑了半天 希望小伙伴不要被坑
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
layui에서 선택의 옵션 오버레이 문제에 대한 솔루션
Vue.js 사용자 정의 이벤트 양식 입력 구성 요소 방법
위 내용은 vue2.0 axios 크로스 도메인 렌더링 문제에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!