详解Webpack-dev-server的proxy⽤法
前⾔
如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求，那么代理某些 URL 会很有⽤。
解决开发环境的跨域问题(不⽤在去配置nginx和host, 爽歪歪~~)
在fig.js中配置
下⾯简单介绍⼀下五个经常使⽤的场景
使⽤⼀:
//...
devServer: {
proxy: {
'/api': 'localhost:3000'
}
}
};
使⽤⼆
如果你想要代码多个路径代理到同⼀个target下, 你可以使⽤由⼀个或多个「具有 context 属性的对象」构成的数组：
//...
devServer: {
proxy: [{
context: ['/auth', '/api'],
target: 'localhost:3000',
}]
}
};
使⽤三:
如果你不想始终传递 /api ，则需要重写路径：
//...
devServer: {
proxy: {
'/api': {
target: 'localhost:3000',
pathRewrite: {'^/api' : ''}
}
}
}
};
使⽤四:
默认情况下，不接受运⾏在 HTTPS 上，且使⽤了⽆效证书的后端服务器。如果你想要接受，只要设置 secure: false 就⾏。修改配置如下：
//...
devServer: {
proxy: {
'/api': {
target: 'ample',
secure: false
}
}
}
};
使⽤五:
有时你不想代理所有的请求。可以基于⼀个函数的返回值绕过代理。
在函数中你可以访问请求体、响应体和代理选项。必须返回 false 或路径，来跳过代理请求。
例如：对于浏览器请求，你想要提供⼀个 HTML 页⾯，但是对于 API 请求则保持代理。你可以这样做：
//...
devServer: {
proxy: {
'/api': {
target: 'localhost:3000',
bypass: function(req, res, proxyOptions) {
if (req.headers.accept.indexOf('html') !== -1) {
console.log('Skipping proxy for browser request.');
return '/index.html';
}
}
}
}
}
};
解决跨域原理
上⾯的参数列表中有⼀个changeOrigin参数, 是⼀个布尔值, 设置为true, 本地就会虚拟⼀个服务器接收你的请求并代你发送该请求,
//...
devServer: {
proxy: {
'/api': {
target: 'localhost:3000',
changeOrigin: true,
}
}
}
};
vue-cli中proxyTable配置接⼝地址代理⽰例
修改 config/index.js
dev: {
// 静态资源⽂件夹
assetsSubDirectory: 'static',
// 发布路径
assetsPublicPath: '/',
// 代理配置表，在这⾥可以配置特定的请求代理到对应的API接⼝
// 使⽤⽅法：vuejs-templates.github.io/webpack/proxy.html
proxyTable: {
// 例如将'localhost:8080/api/xxx'代理到'wangyaxing/api/xxx'
'/api': {
target: 'wangyaxing', // 接⼝的域名
secure: false, // 如果是https接⼝，需要配置这个参数
changeOrigin: true, // 如果接⼝跨域，需要进⾏这个参数配置
},
// 例如将'localhost:8080/img/xxx'代理到'cdn.wangyaxing/xxx'
'/img': {
target: 'cdn.wangyaxing', // 接⼝的域名
secure: false, // 如果是https接⼝，需要配置这个参数
changeOrigin: true, // 如果接⼝跨域，需要进⾏这个参数配置
pathRewrite: {'^/img': ''} // pathRewrite 来重写地址，将前缀 '/api' 转为 '/'。
}
},
/
/ Various Dev Server settings
host: 'localhost', // can be overwritten v.HOST
port: 4200, // can be overwritten v.PORT, if port is in use, a free one will be determined
}webserver接口开发
更多参数
target：要使⽤url模块解析的url字符串
forward：要使⽤url模块解析的url字符串
agent：要传递给http（s）.request的对象（请参阅Node的https代理和http代理对象）
ssl：要传递给ateServer（）的对象
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
参考
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。