プロンプトが表示されたらElementUIプロジェクトがSpringBoot舞台裏プロジェクトを要求：原点からのXMLHttpRequestへのアクセスで**は、CORSポリシーによってブロックされました

シーン

ElementUIのヒントを構築するためのプロジェクトのフロントエンド後：

原点から**でのXMLHttpRequestへのアクセスは、CORSポリシーによってブロックされています**

 

 

背景SpringBootインタフェースを要求するクロスドメインリクエストに問題があったためです。

もともと良いフロントエンドのデータJS ajaxq要求を構築するためのプロジェクトの前に行われることを意図し、それがあるため、クロスドメインで拒否されるだろう。

注意：

ブログ：
https://blog.csdn.net/badao_liumang_qizhi
の社会的関心番号
猿の横柄プログラム
買収関連のプログラミング電子書籍、チュートリアル、無料ダウンロードのためにプッシュ。

実現

そのため、バックグラウンドデータの使用はaxiosを要求します

インストールaxios

NPM axiosをインストール

 

 

次に開く入口プログラムmain.jsはaxiosを追加しました

axiosインポートから 「axios 」

 

 

 

webpack.config.jsのその後オープンプロキシ設定のURL

  

devServer: {
    host: '127.0.0.1',
    port: 8010,
    proxy: {
      '/api/': {
        target: 'http://127.0.0.1:8088',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

 

 

 

以上配置代表项目的启动端口为8010，ElementUI在向后台请求Url时，就会将/api/的请求想target中执行的地址去请求

所以我们可以在页面App.vue中这样去调用后台数据接口

//页面初始化的时候，去调用
        created: function(){
            debugger
            this.getData()
        },
        methods: {
            //通过ajax去请求服务端，获取数据
            getData() {
                debugger
                let url = "/api/user/selectAllLimit?offset=2&limit=1" ;
                this.$axios.get(url).then((res) => {

                    this.tableData = res.data;//把传回来数据赋给packData

                }).catch(function(error){

                    console.log(error);

                })
            }

 

请求效果