项目场景：

提示：这里简述项目相关背景：

当我们使用vue3搭建前后端分离项目时，往往会出现跨域问题。前端往往会提示：

原因分析：

例如，我这里，前端的项目的请求地址是http://localhost:8085/，访问后端的接口为http://localhost:8081/ResourcesCenter/BaseMapStyle/selectByPage，由于端口的不一致，所以出现了跨域问题。

解决方案：

第一步：找到vue.config.js文件，添加如下代码：

module.exports = {
  devServer: {
    open: true,
    host: 'localhost',
    port: 8085,
    //这里的ip和端口是前端项目的;下面为需要跨域访问后端项目
    proxy: {
      '/ResourcesCenter': {
        target: 'http://localhost:8081/ResourcesCenter/',//这里填入你要请求的接口的前缀
        ws:true,//代理websocked
        changeOrigin:true,//虚拟的站点需要更管origin
        secure: true,                   //是否https接口
        pathRewrite:{
          '^/ResourcesCenter':''//重写路径
        },
        headers: {
          referer: 'http://localhost:8081/ResourcesCenter/', //这里后端做了拒绝策略限制，请求头必须携带referer，否则无法访问后台
        }
      }
    }
  }
}

第二步，就是如何调用了

 selectByPage(pageSize, pageNum, keyword) {
        return axios.get('/ResourcesCenter/BaseMapStyle/selectByPage?almanacName='+keyword+'&pageSize='+pageSize+'&pageNum='+pageNum,
            // {
            //     params:{
            //         almanacName:keyword,
            //         pageSize:pageSize,
            //         pageNum:pageNum
            //     }
            // },
            /*' {headers: {\'Content-Type\': \'application/json;charset=UTF-8\'}}'*/)
    }

本人亲试，已成功解决！