집 > 기사 > 웹 프론트엔드 > vue2.0axios 크로스 도메인 및 렌더링 사용 방법

vue2.0axios 크로스 도메인 및 렌더링 사용 방법

php中世界最好的语言원래의: 2018-03-28 17:34:331977검색

이번에는 vue2.0axios 크로스 도메인 및 렌더링 사용법과 vue2.0axios 크로스 도메인 및 렌더링 사용 시 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.

(스캐폴딩 vue-cli 사용)

1단계: main.js

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

에서 다음 선언을 사용합니다. 그런 다음 다른 vue 구성 요소에서 this.$axios를 사용할 수 있습니다

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단계:

시도해 보세요. 교차 도메인은 성공하지만 이는 개발 환경(개발자)이 해결하는 문제일 뿐입니다. 크로스 도메인 문제 프로덕션 환경에서 실제로 원본이 아닌 소스에서 서버에 배포되면 여전히 크로스 도메인 문제가 발생합니다. 예를 들어 우리가 배포한 서버 포트는 3001이므로 공동 디버깅이 필요합니다. 첫 번째 단계에서는 프런트 엔드를 분리할 수 있습니다. 프로덕션 환경과 개발 환경은 별도로 테스트됩니다. config/dev.env.js 및 prod.env.js에서 요청된 주소 API_HOST를 구성합니다. 개발/프로덕션 환경에서는 각각 위에서 구성한 에이전트를 사용하고, 프로덕션 환경에서는 일반 인터페이스 주소를 사용하므로 이렇게 구성합니다.

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',//开发环境
 API_HOST:"/api/"
})

module.exports = {
 NODE_ENV: '"production"',//生产环境
 API_HOST:'"http://api.douban.com"'
}

물론 http를 직접 요청할 수도 있습니다. 개발, 프로덕션 환경에 관계없이 //api.douban.com. 구성 후 프로그램은 테스트 중에 개발 환경인지 프로덕션 환경인지 자동으로 확인한 다음 모든 구성 요소에서 process.env.API_HOST를 사용하여

instance.post(process.env.API_HOST+'user/login', this.form)

와 같은 주소를 사용할 수 있습니다. 단계에서 백엔드 서버를 구성합니다. cros는 도메인 간일 수 있습니다. 즉, access-control-allow-origin: *모든 액세스를 허용합니다. 요약하자면, 개발 환경에서 우리의 프런트엔드는 크로스 도메인에 대한 프록시를 구성할 수 있습니다. 실제 프로덕션 환경에서는 백엔드의 협력이 필요합니다. 어떤 전문가는 “이 방법은 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>

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!