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

場景

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

                })
            }

 

請求效果