問題のAxiosクロスドメインソリューションのヴュー

// axios 中的GET请求
axios.get('/user', {
    params: {
      ID: ‘001’
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// axios 中的POST请求
axios.post('/user', {
    firstName: '1',
    lastName: '2'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

シナリオ1：axios直接クロスドメインアクセスの使用が不可能なので、我々はエージェントを設定する必要があります。Agent原因を解決することができます：クライアントの要求データ・サーバは、クロスドメインの問題の存在であり、サーバと相互にデータを要求することができ、サーバ間で、何のクロスドメインの概念は（サーバが設定されていない場合は、アクセス許可の問題がクロスドメインを禁止する）が存在しないので、言い換えれば、我々は、プロキシサーバが別のサーバからデータを要求することができます設定することができ、その後、私たちのプロキシサーバに要求されたデータを返し、プロキシサーバーは、私たちが達成できるように、私たちのクライアントにデータを返します。ドメイン間でデータにアクセスします。

調製：必要なミドルウェアなどaxiosなどのプラグイン、HTTPプロキシ・ミドルウェアなどにインストールします。

具体的な例：アクセスするには、ここクレソンTop250は、例えば、直接アクセスは次のように：

axios.get（ " http://api.douban.com/v2/movie/top250 "）
.then（RES => {
にconsole.log（RES）
}）
.catch（ERR => {
にconsole.log（ERR）
}）

NPM実行DEVを行うときは、次のように、コンソールが与えられています：

問題のAxiosクロスドメインソリューションのヴュー

事実は、直接クロスドメインの問題が発生しないことを要求したクロスドメイン固有のプレゼンテーションの問題を解決するには、以下の手順を証明しています：

上記の前提条件の場合は、完全にインストールされている、問題を解決するには、次の手順を実行します。

1.設定BASEURL

main.jsにおいて、サーバプレフィックスデータの構成（すなわち、固定部分）は、次の通り：

// 项目入口，配置全局vue
import Vue from 'vue'
import VueRouter from './router/routes.js'
import Store from './store/index.js'

import './assets/less/index.less'
import App from './App.vue'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'  //关键代码
Vue.config.productionTip = false

Vue.use(ElementUI);

new Vue({
    router:VueRouter,
    store:Store,
    template:'<App/>',
    components: {App}
}).$mount('#app')

// 默认进入商品模块
// VueRouter.push({ path: '/home' })

キーコード：axios.defaults.baseURL =「/ API」、私たちの要求のそれぞれの役割は、接頭辞/ APIので送信されます。

2. [設定プロキシ

フォルダ内のproxyTableフィールドindex.js設定ファイルには、プロセスは次のように：

  dev: {
    env: require('./dev.env'),
    port: 8090,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target:'http://api.douban.com/v2', // 你请求的第三方接口
        changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{  // 路径重写，
          '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
        }
      }
    },
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }

ここで使用axios特に3、次のURLを修正：

 axios.get("/movie/top250").then((res) => {
                  res = res.data
                  if (res.errno === ERR_OK) {
                     this.themeList=res.data;
                  }
                }).catch((error) => {
                  console.warn(error)
                })

4.プロジェクトは、クロスドメインの問題が解決された再起動した後、その結果は次の通りです：
[注]：あなたがプロジェクトを再起動する必要があります！！

原理：

私たちはURL / APIにプレフィックスを追加しましたので、私たちが訪問するときに/映画/ top250を参照してください。ローカルホスト：8080 / API /映画/ top250（ここではlocalhost：8080はデフォルトのIPおよびポートです）。

プット/ APIは、すべての以前の内容を置き換えでproxyTableでindex.jsでインターセプト/ APIは、URLが実際に訪問して、対象となったhttp://api.douban.com/v2/movie/top250 。

これまでのところ、純粋なフロントエンドプロキシ設定axiosは、クロスドメインが解決解きます。

コメント欄の内容によれば、次のように集合的に構成、製造および開発環境を区別します。

1. configフォルダの内部にapi.config.js設定ファイルを作成します。

constのisPro = Object.is（process.env.NODE_ENV、 '生産'）

console.log（isPro）。

= {module.exportsは
baseUrlに：isPro '？HTTPS：//www.***/index.php/Official（行アドレス）'： 'API /'
}
そう2.上記文書に組み込まmain.jsファイル内の、本番環境と開発環境のプレフィックス一致ダイナミクスを確保するために定義することができ、以下のように、コードは次のとおりです。

輸入Vueの'VUE'から
インポートするアプリケーション'./App'から
'./router'からインポートルータ
インポート'ブートストラップ/ DIST / JS / bootstrap.min'
輸入'ブートストラップ/ DIST / CSS / bootstrap.min.css'
インポートaxios 「axios」から
「../config/api.config」からインポートapiConfig

。; $ = Vue.prototype Axios Axios
Vue.config.productionTip = falseに;
axios.defaults.baseURL = apiConfig.baseUrl;インターフェースの//アドレス
axios.defaults.withCredentials = falseは、
2段階以上のクロスドメインVUEを解決します問題、および直接オンライン構築するためにパッケージ化することができるが、いずれの質問は、私はあなたの助けを期待し、メッセージのコメント欄を残してください。

20足の親指アップ

問題のAxiosクロスドメインソリューションのヴュー

おすすめ