Vue+SpringBoot のフロントエンドとバックエンドの分離におけるクロスドメインの問題

'axios' から axios をインポートします

//axios.create は axios インスタンスを作成し、インスタンスの設定を書き込みます。インスタンスを介して送信される後続のすべてのリクエストは、現在の設定の対象となります。const $http = axios.create({
    ベースURL: ''、
    タイムアウト: 1000、
    //ヘッダー: {'X-Custom-Header': 'foobar'}
});

// リクエストインターセプターを追加 $http.interceptors.request.use(function (config) {
    // リクエストを送信する前に何かを実行します return config;
}, 関数 (エラー) {
    // リクエストエラーに対して何かを実行します。 return Promise.reject(error);
});

// レスポンスインターセプターを追加 $http.interceptors.response.use(function (response) {
    // レスポンスデータで何かを行う return response.data; // レスポンスデータのデータ部分を返す }, function (error) {
    // エラーに対して何らかの処理を実行します。 return Promise.reject(error);
});

デフォルトの$httpをエクスポートする

エクスポートconst getCourses = () => {
$http.get('http://localhost:8080/teacher/courses') を返します
} 

モジュール.エクスポート = {
    開発サーバー: {
        host: 'localhost', //ホスト番号 port: 8081, //ポート番号 open: true, //ブラウザプロキシを自動的に開く: {
            '/api': {
                target: 'http://localhost:8080/', //インターフェースドメイン名の変更Origin: true, //クロスドメインですか? ws: true, //Websocketのプロキシですか?
                secure: true, //https インターフェースかどうか pathRewrite: { //パスをリセット '^/api': '/'
                }
            }
        }
    }
};

エクスポートconst getCourses = () => {
  $http.get('/api/teacher/courses') を返します
}