Vue项目devServer.proxy代理配置详解

如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。可以通过 *.config.js 中的 devServer.proxy 选项来配置。

  • .config.js文件中,引入依赖项
const proxy = require('http-proxy-middleware');
  • devServer.proxy 可以是一个指向开发环境 API 服务器的字符串
//服务器会将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000上
module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}
  • 更多的代理控制行为:
const proxy = require('http-proxy-middleware');

module.exports = {   
devServer:{
    host: 'localhost',//target host
    port: 8080,
    //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
    proxy:{
        '/api':{
            target: 'http://192.168.1.30:8085',//代理地址,这里设置的地址会代替axios中设置的baseURL
            changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
            //ws: true, // proxy websockets
            //pathRewrite方法重写url
            pathRewrite: {
                '^/api': '/' 
                //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
                //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
           }
    }}
},
//...
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • feisky云计算、虚拟化与Linux技术笔记posts - 1014, comments - 298, trac...
    不排版阅读 3,926评论 0 5
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,145评论 1 32
  • Page 1:nginx 服务器安装及配置文件详解 CentOS 6.2 x86_64 安装 nginx 1.1 ...
    xiaojianxu阅读 8,584评论 1 41
  • 今天开始学腿了,其实在这之前我真的很恐惧水,别说到深水区了就是在浅水区里面我也是在角落里面呆着,现在我让自己尝试着...
    敦儿格物致知阅读 302评论 0 0