vue2.0 axios クロスドメインとレンダリングで注意すべき点は何ですか?

今回は、vue2.0 axios クロスドメインとレンダリングを使用する際の注意点と、vue2.0 axios クロスドメインとレンダリングに関する注意点についてお届けします。 以下は実践的なケースです。見てみましょう。

(Scaffolding vue-cli を使用)

ステップ 1: main.js で次の宣言を使用します

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

その後、他の vue コンポーネントで this.$axios を使用できます

ステップ 2: webpack で proxyTable (config の下のindex.js) を設定します

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'即可
}
}
},

ステップ 3:

試してみます。クロスドメインは成功しますが、これはクロスドメインを解決する開発環境 (dev) のみであることに注意してください。 -ドメインの問題。本番環境では、実際にオリジナル以外のソースからサーバーにデプロイされている場合、クロスドメインの問題が依然として発生します。たとえば、デプロイしたサーバーのポートは 3001 であり、これには共同デバッグが必要です。最初のステップでは、フロントエンドと開発環境を別々にテストできます。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"'
}

もちろん、http を直接リクエストすることもできます。 //api.douban.com 開発環境または本番環境に関係なく。構成後、プログラムはテスト中に開発環境か運用環境かを自動的に判断し、任意のコンポーネントで process.env.API_HOST を使用して

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

などのアドレスを使用できます。ステップでは、バックエンドサーバーを設定します。cros はクロスドメインにすることができます。つまり、access-control-allow-origin: *すべてのアクセスを許可します。要約すると、開発環境では、フロントエンドがクロスドメインにプロキシを構成できます。実際の運用環境では、バックエンドの協力が必要です。ある専門家は、「この方法は ie9 以下では使いにくいです。互換性が必要な場合は、バックエンドのサーバー ポートにプロキシを追加するのが最善の方法です。その効果は開発中に webpack プロキシと同様です。」

ステップ 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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue2.0axios クロスドメインとレンダリングの使い方

Vue.js で写真を自由にドラッグできる仕組み

以上がvue2.0 axios クロスドメインとレンダリングで注意すべき点は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。