場景

搭建ElementUI前端項目後提示：

Access to XMLHttpRequest at **from origin ** has been blocked by CORS policy

這是因為在請求後臺SpringBoot介面時出現了跨域請求問題。

本來打算是搭建好前端項目後再js中進行ajaxq請求數據，但是會因為跨域被拒絕。

註：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關註公眾號
霸道的程式猿
獲取編程相關電子書、教程推送與免費下載。

實現

所以使用axios進行後臺數據的請求

安裝axios

npm install axios

然後打開入口程式main.js添加axios

import axios from '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);

                })
            }

請求效果