ElementUI项目请求SpringBoot后台项目时提示:Access to XMLHttpRequest at **from origin ** has been blocked by CORS
Posted 公众号:霸道的程序猿
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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); }) }
请求效果
以上是关于ElementUI项目请求SpringBoot后台项目时提示:Access to XMLHttpRequest at **from origin ** has been blocked by CORS的主要内容,如果未能解决你的问题,请参考以下文章
SpringBoot + Vue + ElementUI 实现后台管理系统模板
SpringBoot + Vue + ElementUI 实现后台管理系统模板
Java项目:校园跑腿管理系统(java+Springboot+vue+maven+elementui+mysql)
SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇:使用 vue-router 进行动态加载菜单
SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇:使用 vue-router 进行动态加载菜单
SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇: 整合阿里云 OSS 服务 -- 上传下载文件图片