Vue でクロスドメイン処理に axios を使用する方法-jsチュートリアル-php.cn

Vue でクロスドメイン処理に axios を使用する方法

php中世界最好的语言

リリース： 2018-03-28 15:19:58

オリジナル

6290 人が閲覧しました

今回は、vue でクロスドメイン処理に axios を使用する方法を説明します。vue でクロスドメイン処理に axios を使用する場合の注意事項について説明します。

クロスドメインは、バックグラウンドでリクエストヘッダーを設定できる人もいますが、多くのフロントエンドはバックグラウンドの知識がなく、独自にサーバーを構築できないため、厄介な問題になります

。もちろん、クロスドメインの問題を解決できる仮想サーバーは数多くありますが、その本質は、クロスドメインの問題を婉曲的に解決するためにバックエンドと通信することです。そのため、vue-cli にもこの機能があります。クロスドメインの問題を解決する機能

もちろん、ajax を直接送信することは不可能ですし、成功するでしょう? 設定ファイルを変更する必要があります

コード:

dev: {
		env: require('./dev.env'),
		port: 8080,
		autoOpenBrowser: false,
		assetsSubDirectory: 'static',
		assetsPublicPath: '/',
		proxyTable: {
			'/gp': {
				target: 'http://we7.qw1000.cn/',
				changeOrigin: true,
				pathRewrite: {
					'^/gp': '/'
				}
			}
		}
	}

ログイン後にコピー

これは一般的なテンプレートで、主にいくつかの概念が含まれています:

dev、当然仮想サーバーを意味します、

autoOpenBrowser

ログイン後にコピー

はあまり重要ではありません

属性、ブラウザが自動的に開けるかどうかを設定するだけです。

proxyTable: { 
  '/gp': { 
  target: 'http://we7.qw1000.cn/', 
  changeOrigin: true, 
  pathRewrite: { 
   '^/gp': '/' 
  } 
  }

ログイン後にコピー

が設定されています。もちろん、これも webpack の機能なので、開発環境でのみ使用できます。投稿を例に挙げます:

methods: {
			hello: function(e) {
				var str;
				console.log(e.target.files[0]);
				var _this = this;
				var that = new FormData();
				that.append("myfile", e.target.files[0]);
				this.$http.post('gp/app/index.php?i=2&c=entry&do=tool/image&m=qw_deal', that)
					.then(function(sures) { console.log(sures);
						console.log("上产成功") })
					.catch(function(catchres) { console.log(catchres);
						console.log("上传失败") })
			}
		},

ログイン後にコピー

これは一体何ですか?$http? ? ?

これは当然 main.js に axios を導入した結果ですが、vue のプラグインではないため use メソッドを直接使用することはできず、プロトタイプチェーンにロードする必要があります

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

ログイン後にコピー

このようにして、直接使用できます

これは私の友人からのリンクであり、アップロードされた画像ファイルへのリンクを選択しました

注:

1のクロスドメインソリューション。 webpack このメソッドは開発環境での使用にのみ適しています。 2. inde.js 内で dev を設定する場合、設定する必要があるドメイン名が多すぎる場合に注意してください。は無効になるため、www にする必要があります。百度。 com

3. axios を使用して、

画像をアップロードする必要はありません

この記事の事例を読んだ後は、この方法を習得したと思います。 PHP 中国語 Web サイトの他の関連記事にも注目してください。推奨読書:

JS は星空ナビゲーションバーをどのように実装するか

vue と vue-i18n はバックグラウンドデータの多言語切り替えをどのように実装するか

以上がVue でクロスドメイン処理に axios を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。