vue中代理请求

最新推荐文章于 2024-07-16 10:50:15 发布

原创最新推荐文章于 2024-07-16 10:50:15 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

vue成长之路专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了如何在项目中配置axios进行代理跨域，通过修改config/index.js文件，设置proxyTable来实现接口调用的跨域问题。具体步骤包括：打开config/index.js文件，找到并配置proxyTable，设置目标域名和路径重写规则，最后在组件中使用$axios.post调用接口。

1.打开config/index.js文件

module.exports = {
            dev:{
         }
    }

2.在dev中找见proxyTable {}

 module.exports = {
            dev:{
                proxyTable:{
                    '/api': {
                        target: 'http://baidu',                       
  //设置你调用的接口域名和端口号 别忘了加http
                        changeOrigin: true,
                        pathRewrite: {
                        '^/api': ''                                   
   //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://baidu/user/add'，直接写‘/api/user/add’即可
                        }
                    }
                }
            }
        }

3.在组件中调用接口

       this.$axios.post("/api/user/add",{
            params:{
                uname:dingding,
                upwd:111111,
        }})
        .then(function(res){
            console.log(res)
        })
        .catch(function(err){
            console.log(err)
        })