VUE axiosドメイン間問題No'Access-Control-Allow-Origin'header is present on the requested resource.


開発環境では、axiosを使用してインタフェースを呼び出す場合、ドメイン間でブラウザによってブロックされるため、リクエストに失敗し、コンソールにNo'Access-Control-Allow-Origin'header is present on the requested resourceが表示する.Origin 'http://localhost:8081' is therefore not allowed access.
VUE axios 跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested resource._第1张图片
ドメインをまたぐ解決策はたくさんありますが、一つ一つ羅列しないで、ここでは自分の解決策だけを記録します.
プロジェクト環境:
vue v2.5
vue-cli v2.9(3.0のバージョンは大きく変更されており、公式ドキュメントを参照してvue.config.jsで対応する修正を行い、このファイルがなければ自分で追加する必要があります.)
webpack v3.6
解決策:
プロジェクトルートディレクトリにconfig/indexが見つかりました.jsファイル、proxyTableを見つけて以下の構成を追加
proxyTable: {
    '/gamutgameshow':{                                //        
    target:'http://192.168.0.3:8080/gamutgameshow',   //         
        changeOrigin:true,                            //     
        pathRewrite:{'^/gamutgameshow':''}            //      
      }
    }

そして、あなたのプロジェクトでインタフェースリクエストを送信する必要がある場所に戻って、リクエストのアドレスを変更して、私たちが書いたエージェントインタフェース名に変えればいいです.'/gamutgameshow'
axios.get('/gamutgameshow').then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err)
})

実行結果:
VUE axios 跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested resource._第2张图片
 
ここではドメイン間の問題を解決しました.(200に戻らない場合は、ご自身で無視してください*^^*)
注意:ここのエージェントは開発環境にのみ適用され、オンラインのプロジェクトは正常なインタフェース要求アドレスに変更されます!!!
2020-5-11更新
vue-cli 3.0ドメイン間エージェント構成方法
プロジェクトとディレクトリのvue.config.jsファイルのdevServer>proxyエージェントを追加し、このファイルがなければ自分で新規作成します.
module.exports = {
   //         
  devServer: {
    proxy: {
      '/api': {//          ,   api         
        changeOrigin: true,
        target: 'http://192.168.1.1:8080/'
      },
      '/': { //websoket      
        ws: true,
        target: 'ws://192.168.1.1:8080/'
      }
    }
  }

}

 
THE END