ここで、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 で、フロント エンドとバック エンドの共同デバッグが必要です。第 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"' }
もちろん、開発環境でも本番環境でも http://api を直接リクエストできます。構成後、プログラムはテスト中に開発環境か運用環境かを自動的に判断し、API_HOST を自動的に照合します。任意のコンポーネントで process.env.API_HOST を使用して、
instance.post(process.env.API_HOST+'user/login', this.form)
などのアドレスを使用できます。 2 番目のステップの後、エンドサーバーはクロスドメインを設定できます。これは、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>
上記は皆さんのためにまとめたものです。将来皆さんのお役に立てれば幸いです。
関連記事:
layuiのselectのオプションオーバーレイ問題の解決策
Vue.jsカスタムイベントフォーム入力コンポーネントメソッド
以上がvue2.0 axios クロスドメイン レンダリングの問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。