原文首发于:Webpack-dev-server 的代理使用 前言 如果您有独立的前端开发服务器 API,并且希望在同一域名下发送 API 请求,那么代理单个 URL 可能会很有用。 解决开发环境的跨域问题(不用配置nginx和host,爽了~~)在webpack.config.js中配置。 下面简单介绍一下五个常用场景:
mmodule.exports = {
//...
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}
};
对 /api/xxx 的请求现在将被代理为请求:3000/api/xxx。 例如,/api/user 现在将被代理请求:3000/api/user。
使用两个
如果您想将多个路径代理到同一目标,您可以使用由一个或多个“具有上下文属性的对象”组成的字段:
module.exports = {
//...
devServer: {
proxy: [{
context: ['/auth', '/api'],
target: 'http://localhost:3000',
}]
}
};
使用三:
如果不想一直传递/api,则需要重画路径:
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api' : ''}
}
}
}
};
对 /api/xxx 的请求现在将被代理到 request:3000/xxx。 例如,/api/user 现在将被代理到 request:3000/user。
使用四:
默认情况下,不接受通过 HTTPS 运行且使用无效证书的前端服务器。 如果你想接受webpack代理原理,只需设置 secure: false 即可。 修改配置如下:
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'https://other-server.example.com',
secure: false
}
}
}
};
使用五:
有时你并不想接受所有的恳求。 可以根据函数的返回值绕过代理。
在该函数中webpack代理原理,您可以访问请求正文、响应正文和代理选项。 必须返回 false 或路径以跳过代理请求。
例如:您想要为浏览器请求提供 HTML 页面,但为 API 请求保留代理。 你可以这样做:
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://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,本地虚拟服务器将接收您的请求并代表您发送请求。
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
}
}
}
};
vue-cli中proxyTable配置socket地址代理示例
修改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 来重写地址,将前缀 '/api' 转为 '/'。
}
},
// 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
}
发表评论