场景

搭建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相关推荐

SpringBoot+MyBatisPlus整合时提示：Invalid bound statement(not found):**.dao.UserDao.queryById
场景在使用SpringBoot+MyBatisPlus搭建后台启动项目时,使用EasyCode自动生成代码. 在访问后台接口时提示: Invilid bound statement (not fou ...
git 拉取项目CMS管理后台项目
git 拉取项目CMS管理后台项目 github 项目地址:luwei.web.study-ant-design-pro 企业内部项目地址:study.ant-design-pro 注:github ...
ElementUI中el-select请求springboot后台数据显示下拉项并在el-table中格式化显示
场景 Vue+ElementUI+axios+SpringBoot前后端分离的后台管理系统. 将表格中某字段类似于状态等需要关联字典表进行筛选查询时.示例如下注: 博客: https://blog. ...
Gradle项目在IDEA中运行时提示:Unnecessarily replacing a task that does not exist is not supported. Use create
场景在IDEA中新建Gradle项目后,使用Java语言. 新建类后添加main方法,然后运行main方法释提示: could not create task ':HelloWorldServer. ...
unauthorized 项目请求_调用webserver时出现:请求因 HTTP 状态 401 失败: Unauthorized。
今天在调用webserver时出现了上述标题的错误,开始认为是由于端口的问题,我把端口恢复80默认端口后,但是问题并没有解决!后来我自己又试了很多方法,都没解决现在解决了,就是权限问题!! 我把心得分 ...
springMVC web项目转springboot web项目的杂谈
文章背景: 一个老的web项目是用springMVC做的,最近需要修改一些功能,然后用本地部署的Tomcat启动,启动过程中各种报错,在网上百度半天都是spring版本的问题,纠结了一段时间,终于有了 ...
springboot搭建redis时提示RedisCommandExecutionException: CLUSTERDOWN Hash slot not served解决办法
问题描述今天在springboot上搭建redis时,发现了一个报错:Error in execution; nested exception is io.lettuce.core.RedisCom ...
Ajax跨域请求时出现Access to XMLHttpRequest at ‘xxx‘ from origin ‘xxx‘ has been been blocked by CORS policy
1.在做前后端分离的项目时,会遇到跨域问题,如下图所示: 2.这里可以看到,出现了跨域问题,首先我们先看看跨域问题是怎么产生的: 这是由于浏览器同源策略的限制. 所谓同源是指:协议.域名.端口三者都要 ...
git提交代码时提示Your branch is up-to-date with ‘origin/master‘ 该怎么办
根本原因是版本分支的问题解决办法: 1.新建一个分支,然后切换到新分支 git branch newbranch git checkout newbranch 2.将你的改动提交到新分支上 git ...

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

场景

实现

ElementUI项目请求SpringBoot后台项目时提示：Access to XMLHttpRequest at from origin has been blocked by CORS相关推荐

最新文章

热门文章

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

场景

实现

ElementUI项目请求SpringBoot后台项目时提示：Access to XMLHttpRequest at **from origin ** has been blocked by CORS相关推荐

最新文章

热门文章

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

ElementUI项目请求SpringBoot后台项目时提示：Access to XMLHttpRequest at from origin has been blocked by CORS相关推荐