vueaxiosをインストールします
npm install --save axios vue-axios
main.jsで導入
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
qsライブラリをインストールする
npm install qs
- qsライブラリ変換を使用しない場合、バックエンドはデータ内のデータを受け入れることができません
- 理由:デフォルトでは、axiosを送信するときのリクエストヘッダーのコンテンツタイプは次のとおりです。
Content-Type:application/json;charset=UTF-8
Content-Type:application/x-www-form-urlencoded
- したがって、コンテンツタイプの変換には、axiosのqs組み込みライブラリのメソッドを使用してください。
ajaxリクエストを送信する
import Qs from "qs";
this.axios({
url: 'speedController/tokens',
method: "post",
transformRequest: [function (data) {
return Qs.stringify(data)
}],
data:
{
username: 'admin',
password: 'qwe!23'
},
}
)
.then(function (response) {
console.log(response.data)
})
.catch(function (error) {
console.log(error);
});
クロスドメインの問題
- クロスドメインの問題は、フロントエンドとバックエンドの分離プロジェクトのリクエストを送信するときに発生する可能性があります(または発生しない可能性があります)
- ソリューション2種類のプロジェクトソリューションを集めました
- springmvcプロジェクト
<mvc:cors>
<mvc:mapping path="/**"
allowed-origins="*"
allowed-methods="POST, GET, OPTIONS, DELETE, PUT,PATCH"
allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-RequestedWith"
allow-credentials="true" />
</mvc:cors>