0
点赞
收藏
分享

微信扫一扫

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

ElementUI项目请求SpringBoot后台项目时提示:Access to XMLHttpRequest at **from origin ** has been blocked by CORS_ios

 

这是因为在请求后台SpringBoot接口时出现了跨域请求问题。

本来打算是搭建好前端项目后再js中进行ajaxq请求数据,但是会因为跨域被拒绝。

注:

实现

所以使用axios进行后台数据的请求

安装axios

npm install axios

 

ElementUI项目请求SpringBoot后台项目时提示:Access to XMLHttpRequest at **from origin ** has been blocked by CORS_数据_02

然后打开入口程序main.js添加axios

import axios from 'axios'

 

ElementUI项目请求SpringBoot后台项目时提示:Access to XMLHttpRequest at **from origin ** has been blocked by CORS_ElementUI_03

然后打开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': ''
}
}
},

 

ElementUI项目请求SpringBoot后台项目时提示:Access to XMLHttpRequest at **from origin ** has been blocked by CORS_ajax_04

以上配置代表项目的启动端口为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_ajax_05

 

举报

相关推荐

0 条评论