美文网首页
webpack代理设置,解决开发过程中的跨域问题

webpack代理设置,解决开发过程中的跨域问题

作者: 晚上吃火锅吗 | 来源:发表于2018-05-06 12:14 被阅读0次

前后端分离开发过程中,前端需要连接后台的接口。
比如接口发布在127.0.0.1:5000,我们在前端直接get、post就会出现跨域问题。
webpack很好的解决了这个问题,只需要在webpack工程文件中找到
config\index.js
找到这一段代码

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    ...
}

在proxyTable中添加

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api/*':{
        target:'http://127.0.0.1:5000/',
        changeOrigin:true,
      }
    },
    ...
}

这样一来,我们一切api/xxx的请求,就会自动被代理成http://127.0.0.1:5000/api/xxx
比如

this.$http({
            method:'GET',
            url:'/api/getShop',
        }).then(function(response){
            console.log(response)
        })

实际会访问http://127.0.0.1:5000/api/getShop

跨域问题解决

相关文章

网友评论

      本文标题:webpack代理设置,解决开发过程中的跨域问题

      本文链接:https://www.haomeiwen.com/subject/azturftx.html