vue3.0配置跨域

在项目中遇到了跨域问题,网上搜索了各种方法都没有成功

代码:

首先后台的接口是这样的  http://47.96.29.50:8080/api/v1/discAerator/list

于是配置了baseURL:

axios.defaults.baseURL = 'http://47.96.29.50:8080/api/v1';

然后按照网上配置了vue.config.js如下:

module.exports = {
  devServer: {
    open: true,
    port: 8080,
    proxy: {
      '/api': {
        target: `http://47.96.29.50:8080`,
        changeOrigin: true, 
        pathRewrite: {
          '^/api': ''
        }
      },

    }
  }
}

页面请求:

axios.get({ url: "/discAerator/list" }).then(res => {
        console.log(res);
      });

然后页面报错:

vue3.0配置跨域

经过一番思索,将config配置中目标路径修改为:

 proxy: {
      '/api': {
        target: `http://47.96.29.50:8080/api/v1`,
        changeOrigin: true, 
        pathRewrite: {
          '^/api': ''
        }
      }
    }

然后baseURL修改:

axios.defaults.baseURL = '/api';

页面请求不变,此时再重启项目,跨域请求成功!

vue3.0配置跨域

 

 

我是一个一年经验的前端开发小白,这次只是记录自己解决了问题,但是我的方法也不一定就能够解决你的问题。希望大家不要盲目复制,还是要自己多尝试解决。

 

这里祝大家进步飞快!

上一篇:视频播放器 layui-ckplayer


下一篇:二级目录部署springboot项目