Vue中调接口时出现的跨域问题

Mr.指尖舞者

已于 2022-04-24 15:07:50 修改

阅读量1.6k

点赞数 8

分类专栏：项目遇到问题和总结文章标签： vue

于 2022-04-23 23:00:28 首次发布

本文链接：https://blog.csdn.net/qq_56989560/article/details/124372299

版权

项目遇到问题和总结专栏收录该内容

16 篇文章 5 订阅

订阅专栏

在 vue.config.js文件中新增以下属性

module.exports = {
    devServer: {
        //跨域
        proxy: {
            '/api': {
                target: 'http://v.juhe.cn/', //你要调用的接口
                changOrigin: true,//准许跨域
                //路径重写
                pathRewrite: {
//重写路径，当我们在浏览器中看到请求的地址为：
//http://localhost:8080/api/frontend/experts/getlist 时
//实际上访问的地址是：
//http://localhost:8081/dong-guan-project/tp6-dgjx/public/index.php/frontend/experts/getlist
//因为重写了 /api
                    '^/api': '' //路径转发代理
                }
            }
        }
    }
}

然后在你要用的组件中调用（记着项目要重新启动）

  getnews() {
      axios
         .get("api/toutiao/index?type=top&key=44db60d93b75588e522684d3513")
         .then((d) => {
           console.log(d);
         });
     },

这种方式只适用于项目在开发阶段设置