場景

搭建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(){debuggerthis.getData()},methods: {//通過ajax去請求服務端，獲取數據getData() {debuggerlet 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);})}

請求效果

?

總結

以上是生活随笔為你收集整理的ElementUI项目请求SpringBoot后台项目时提示：Access to XMLHttpRequest at **from origin ** has been blocked by CORS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。