当前位置:Gxlcms > 数据库问题 > ElementUI项目请求SpringBoot后台项目时提示: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 policy

时间:2021-07-01 10:21:17 帮助过:313人阅读

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 policy

标签:启动   ror   相关   create   数据   axios   origin   pac   port   

人气教程排行