axiosドメイン間問題の処理
2509 ワード
まずnpmはaxiosをインストール、次にmain.jsに導入:
import axios from 'axios'
Vue.prototype.$axios=axios//axiosをvueのプロトタイプにマウントし、vueでは各コンポーネントがaxiosを使用してリクエストVueを送信することができる.prototype.HOME='/api'//重要なのはここ、Vue.prototype.HOME='/api'は定値で、デフォルトはlocalhostを指し、すべての変更は'/api'を指し、プロファイルindex.js定義のドメイン間パス
第2のステップは、上述config>indexを修正することである.jsプロファイル
最後に、ドメインにまたがるファイルで操作します.
注意しなければならないのは:Vueプロジェクトの中でconfigの中のファイルを修正したら、くれぐれもプロジェクトを再起動して、プロジェクトを再起動して、プロジェクトを再起動して、さもなくば必ず間違いを報告します.
もちろん、これはローカルでドメイン間でインタフェースに正常にアクセスできるだけで、オンラインではバックグラウンドと協議する必要があります.
Vue 3にアップグレードすると、Vue 2に格納されているコンフィギュレーションフォルダがなくなりますので、慌てないでください.packageでいいです.jsonファイルの兄弟ディレクトリの下にvueを作成します.config.jsファイル.このファイルの基本構成を示します.
Vue 3はドメイン間で解決され、コンテンツは第2ステップの構成エージェントとVue 2が異なるだけで、他の一致しています.
import axios from 'axios'
Vue.prototype.$axios=axios//axiosをvueのプロトタイプにマウントし、vueでは各コンポーネントがaxiosを使用してリクエストVueを送信することができる.prototype.HOME='/api'//重要なのはここ、Vue.prototype.HOME='/api'は定値で、デフォルトはlocalhostを指し、すべての変更は'/api'を指し、プロファイルindex.js定義のドメイン間パス
第2のステップは、上述config>indexを修正することである.jsプロファイル
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: { //axios
'/api': { // url
target:'http://192.168.2.80:8081/',
changeOrigin:true, //
pathRewrite:{
'^/api': ''
}
}
}
}
....
}
最後に、ドメインにまたがるファイルで操作します.
created() {
var url = this.HOME + '/index***ds/getFe***List'; //HOME , ,
this.$axios({ //this vue , axios vue , this.$axios axios
method: 'post',
url: url,
data: {feedType: 1, page: 1, pagesize: 10}
}).then(function (res) {
console.log(res);
}).catch(function (err) {
console.log(err);
})
},
, 。
注意しなければならないのは:Vueプロジェクトの中でconfigの中のファイルを修正したら、くれぐれもプロジェクトを再起動して、プロジェクトを再起動して、プロジェクトを再起動して、さもなくば必ず間違いを報告します.
もちろん、これはローカルでドメイン間でインタフェースに正常にアクセスできるだけで、オンラインではバックグラウンドと協議する必要があります.
Vue 3にアップグレードすると、Vue 2に格納されているコンフィギュレーションフォルダがなくなりますので、慌てないでください.packageでいいです.jsonファイルの兄弟ディレクトリの下にvueを作成します.config.jsファイル.このファイルの基本構成を示します.
module.exports = {
outputDir: 'dist', //build
assetsDir: 'assets', // (js, css, img)
lintOnSave: false, // eslint
devServer: {
open: true, //
host: "localhost",
port: '8081',
https: false, // https
hotOnly: false, //
proxy: null,
}
}
Vue 3はドメイン間で解決され、コンテンツは第2ステップの構成エージェントとVue 2が異なるだけで、他の一致しています.
devServer: {
open: true, //
host: "localhost",
port: '8081',
https: false,
hotOnly: false,
proxy: {
'/api': {
target: 'https://www.v2ex.com/api', //API
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
}