vue中代理请求

夜丶陌颜

于 2019-01-15 17:03:22 发布

阅读量1.4k

点赞数

分类专栏： vue成长之路

本文链接：https://blog.youkuaiyun.com/c_liufeng/article/details/89228109

版权

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

28 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
        })