cli-service 添加响应头
时间: 2023-09-22 13:04:56 浏览: 82
awscli-bundle.zip
要在 Vue.js 项目中使用 `cli-service` 添加响应头,可以使用 [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)。这是一个 Node.js 代理中间件,可以在请求被转发到后端服务器之前,拦截并修改请求和响应。
具体步骤如下:
1. 安装 `http-proxy-middleware`:
```
npm install http-proxy-middleware --save-dev
```
2. 在 `vue.config.js` 中添加代理配置:
```javascript
const proxyMiddleware = require('http-proxy-middleware');
module.exports = {
devServer: {
before: function (app, server, compiler) {
// 添加响应头
app.use('/api', proxyMiddleware({
target: 'http://localhost:3000',
pathRewrite: {'^/api' : ''},
onProxyRes: function(proxyRes, req, res) {
proxyRes.headers['X-Proxy-Header'] = 'Added by proxy middleware';
}
}));
}
}
};
```
这里的配置将请求路径以 `/api` 开头的请求代理到 `http://localhost:3000`,并在代理响应中添加了自定义的响应头 `X-Proxy-Header`。
3. 在前端代码中使用代理:
```javascript
axios.get('/api/data').then(response => {
console.log(response);
});
```
这里的请求路径是 `/api/data`,会被代理到 `http://localhost:3000/data`。在响应中,可以看到自定义的响应头已经被添加了。
阅读全文