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. ファイルをアップロードするのに ajax などの formdata を使用する必要はありません。

関連記事:

Axiosをベースにしたよく使われるリクエストメソッドのエイリアス(詳細解説)

Vuexを使ったメモアプリの実装方法

vue2.0をベースにスタイルや表示を変更する方法ステータス値

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