webpack中 proxy 在 server 和 vue-cli 的用法

webpack中 proxy 在 server 和 vue-cli 的用法

webpack-dev-server - 使用场景（ 在 webpack.config.js 中配置 ）

webpack 中 devServer 的 proxy 代理其实是集成了 http-proxy-middleware
首先安装依赖 npm install --save-dev http-proxy-middleware

1. 单个路径代理如下：

module.exports = {
   // ...
   devServer: {
       proxy: {
           '/api': 'http://localhost:8080'
       }
   }
};

请求到 /api/*** 现在会被代理到请求 http://localhost:8080/api/***。

2. 如果你想要代码 多个路径 代理到同一个target下, 你可以使用由一个或多个【具有 context 属性的对象】构成的数组：

module.exports = {
    // ...
    devServer: {
        proxy: [{
            context: ['/auth', '/api'],
            target: 'http://localhost:8080',
        }]
    }
};

3. 如果你不想始终传递 /api ，则需要 重写路径（ pathRewrite ） ：

module.exports = {
    //...
    devServer: {
       	proxy: {
           '/api': {
               target: 'http://localhost:8080',
               pathRewrite: {'^/api' : ''}
           }
        }
    } 
};
// ******* option.pathRewrite： 对象/函数，重写目标url路径
// 重写
pathRewrite: {'^/one/api' : '/two/api'}

// 移除
pathRewrite: {'^/remove/api' : ''}

// 添加
pathRewrite: {'^/' : '/path/'}

// 自定义
pathRewrite: function (path, req) { return path.replace('/api', '/base/api') }

4. 默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。
   如果你想要接受，只要设置 secure: false 就行。修改配置如下：

module.exports = {
    //...
    devServer: {
        proxy: {
            '/api': {
                target: 'https://优快云zyk.example.com',
                secure: false
            }
        }
    }
};

5. 有时你不想代理所有的请求。可以基于一个函数的返回值绕过代理。
   在函数中你可以访问请求体、响应体和代理选项。必须返回 false 或路径，来跳过代理请求。

例如：对于浏览器请求，你想要提供一个 HTML 页面，但是对于 API 请求则保持代理。你可以这样做：

module.exports = {
  // ...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                bypass: function(req, res, proxyOptions) {
                    if (req.headers.accept.indexOf('html') >= 0) {
                        console.log('Skipping proxy for browser request.');
                        return '/index.html';
                    }
                }
            }
        }
    }   
};

5. 还可以根据请求接口 重写目标服务器

module.exports = {
    //...
    devServer: {
       	proxy: {
           '/api': {
               target: 'http://localhost:8080',
               pathRewrite: {'^/api' : ''},
               router:{
              	 'api':'http://优快云zyk.example.com'
              	 // 若请求接口为/api 则重写目标服务localhost:8080为http://优快云zyk.example.com
			   }
           }
        }
    } 
};
=========【router 转发 可以是多个 最终会返回最先匹配到的结果 ，所以配置过程中要 **注意顺序** 】=========
router:{
	'/apo1': 'http:// *****',
	'/apo2': 'http:// *****'
	'/apo3': 'http:// *****'
}
===== 自定义 ====
router:function(req){
	if(req == '*******'){
		return 'http:// ***/121212'
	}
}

6. http-proxy 事件

   option.onError: 监听proxy错误事件

   option.onProxyRes：监听proxy的回应事件

   option.onProxyReq：监听proxy的请求事件

跨域问题解决

有个changOrigin参数，是布尔值，设置为true，本地就会虚拟一个服务器接收你的请求并代你发送该请求,

module.exports = {
    // ...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true,  // **如果设置成true：发送请求头中host会设置成target**
            }
        }
    }
};

vue-cli中proxyTable配置接口地址代理

修改 config/index.js

module.exports = {
    dev: {
    // 静态资源文件夹
    assetsSubDirectory: 'static',
    // 发布路径
    assetsPublicPath: '/',

    // 代理配置表，在这里可以配置特定的请求代理到对应的API接口
    // 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
    proxyTable: {
        // 例如将'localhost:8080/api/xxx'代理到'https://wangyaxing.cn/api/xxx'
        '/api': {
            target: 'https://wangyaxing.cn', // 接口的域名
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        },
        // 例如将'localhost:8080/img/xxx'代理到'https://cdn.wangyaxing.cn/xxx'
        '/img': {
            target: 'https://cdn.wangyaxing.cn', // 接口的域名
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
            pathRewrite: {'^/img': ''}  // pathRewrite 来重写地址，将前缀 '/img' 转为 '/'。
        }
    },
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 4200, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
}

target：要使用url模块解析的url字符串
forward：要使用url模块解析的url字符串
agent：要传递给http（s）.request的对象（请参阅Node的https代理和http代理对象）
ssl：要传递给https.createServer（）的对象
ws：true / false，是否代理websockets
xfwd：true / false，添加x-forward标头
secure：true / false，是否验证SSL Certs
toProxy：true / false，传递绝对URL作为路径（对代理代理很有用）
prependPath：true / false，默认值：true - 指定是否要将目标的路径添加到代理路径
ignorePath：true / false，默认值：false - 指定是否要忽略传入请求的代理路径（注意：如果需要，您必须附加/手动）。
localAddress：要为传出连接绑定的本地接口字符串
changeOrigin：true / false，默认值：false - 将主机标头的原点更改为目标URL

（ 原文首次发表在：webpack-dev-server的 proxy 用法 ）

参考

· 官方文档
· http-proxy-middleware
· node-http-proxy
· API Proxying During Development