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プロファイル
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': ''
            }
        }
    },
}