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

前后端分离开发过程中,前端需要连接后台的接口。
比如接口发布在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代理设置,解决开发过程中的跨域问题)