Vue-cli3 本地代理配置(解决开发中跨域问题)[摘录]

  • 为什么需要请求代理?

现在前后端分离,开发不在一个主机上,所以需要在开发环境中请求API,需要服务器的API代理到本地。

  • 这个问题在Vue-cli3已经有了解决方案。
  • 通过vue.config.js配置文件中的devServer.proxy这个对象,其中devServer.proxy是开发环境下的服务器地址,
  • 配置如下
module.export = {
    devServer:{
        proxy:'http://localhost:8080'
    }
}

- proxy填写需要代理的服务器地址。

  • 完整代理配置如下:
    module.exports = {
    devSrever:{
    port:'8081',//代理端口
    open:false,//项目启动时是否自动打开浏览器
    proxy:{
    '/admin':{//代理api
    target:'http:**:0000',//服务器api地址
    changeOrigin:true,//是否跨域
    ws:true,//proxy websocket
    pathRewrite:{//重写路径
    '^/admin':''
    }
    }
    }
    }
    }
注意:使用此代理后,部署线上服务器,服务器中需要使用nigx反向代理才能正常使用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。