ElementUI項目請求SpringBoot后台項目時提示：Access to XMLHttpRequest at **from origin ** has been blocked by CORS policy

場景

搭建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);

                })
            }

 

請求效果