我可以将 cookie 添加到 webpack 开发服务器代理吗?
Can I add cookies to a webpack dev server proxy?
我正在尝试在我的 webpack 开发服务器中设置代理。问题是我无法控制要连接的服务器,我需要对请求进行身份验证。
有什么方法可以将 cookie 添加到我发送到代理服务器的请求中?我查看了它链接到的 webpack dev server proxy server page, and the node-http-proxy 页面,但没有看到任何关于 cookie 的信息。我也不确定是否有办法让我看到这些转发的请求,所以我无法判断我正在尝试的任何事情是否正在做任何事情。
有什么想法吗?
进一步调查后,开发服务器似乎只会转发您发送给它的任何 cookie。没有为我尝试做的身份验证工作,我想亚马逊有一些我无法解释的更多安全措施,但这就是答案。
将 cookie 添加到您发送到开发服务器的请求中,并正确设置代理。
如果您只需要为代理重写 cookie 域,请查看 node-http-proxy 中的选项 cookieDomainRewrite。
此外,如果您想找到一种方法来围绕请求/响应的 cookie 注入自定义行为,请查看您可以挂钩的事件:
proxy.on('proxyRes', function (proxyRes, req, res) {
console.log('RAW Response from the target',JSON.stringify(proxyRes.headers, true, 2));
});
proxy.on('proxyReq', function (proxyRes, req, res) {
console.log('RAW Request from the target',JSON.stringify(proxyReq.headers, true, 2));
});
https://github.com/nodejitsu/node-http-proxy#listening-for-proxy-events
这些选项可以添加到 devServer 代理的 webpack.config.js 中,如下所示:
{
devServer: {
proxy: {
onProxyReq: function(proxyReq, req, res){
proxyReq.setHeader('x-added', 'foobar');
},
cookieDomainRewrite: ""
}
}
}
https://github.com/chimurai/http-proxy-middleware#http-proxy-events
我写了一个小插件可以轻松地向 webpack-dev-server 添加 cookie:https://github.com/ktmud/http-proxy-middleware-secure-cookies
它会在需要时自动提示您输入身份验证 cookie,并在可能时将您的输入存储在系统钥匙串中。
对于我的情况,这是解决方案:
- 添加
cookie-parser
(来自npm或yarn),例如:yarn add 'cookie-parser' --dev
- 然后在
devServer
中,使其像
const cookieParser = require('cookie-parser') // put at the top
...
devServer: {
before(app) {
app.use(cookieParser())
app.all('/my/route1/', (req, res) => {
const result = {msg: 'setting cookie'}
res.cookie('foo', 'bar') // set cookie
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify(result));
});
app.all('/my/route2', (req, res) => {
const result = {
my_cookie: req.cookies['foo'], // get cookie
}
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify(result));
});
},
}
我正在尝试在我的 webpack 开发服务器中设置代理。问题是我无法控制要连接的服务器,我需要对请求进行身份验证。
有什么方法可以将 cookie 添加到我发送到代理服务器的请求中?我查看了它链接到的 webpack dev server proxy server page, and the node-http-proxy 页面,但没有看到任何关于 cookie 的信息。我也不确定是否有办法让我看到这些转发的请求,所以我无法判断我正在尝试的任何事情是否正在做任何事情。
有什么想法吗?
进一步调查后,开发服务器似乎只会转发您发送给它的任何 cookie。没有为我尝试做的身份验证工作,我想亚马逊有一些我无法解释的更多安全措施,但这就是答案。
将 cookie 添加到您发送到开发服务器的请求中,并正确设置代理。
如果您只需要为代理重写 cookie 域,请查看 node-http-proxy 中的选项 cookieDomainRewrite。
此外,如果您想找到一种方法来围绕请求/响应的 cookie 注入自定义行为,请查看您可以挂钩的事件:
proxy.on('proxyRes', function (proxyRes, req, res) {
console.log('RAW Response from the target',JSON.stringify(proxyRes.headers, true, 2));
});
proxy.on('proxyReq', function (proxyRes, req, res) {
console.log('RAW Request from the target',JSON.stringify(proxyReq.headers, true, 2));
});
https://github.com/nodejitsu/node-http-proxy#listening-for-proxy-events
这些选项可以添加到 devServer 代理的 webpack.config.js 中,如下所示:
{
devServer: {
proxy: {
onProxyReq: function(proxyReq, req, res){
proxyReq.setHeader('x-added', 'foobar');
},
cookieDomainRewrite: ""
}
}
}
https://github.com/chimurai/http-proxy-middleware#http-proxy-events
我写了一个小插件可以轻松地向 webpack-dev-server 添加 cookie:https://github.com/ktmud/http-proxy-middleware-secure-cookies
它会在需要时自动提示您输入身份验证 cookie,并在可能时将您的输入存储在系统钥匙串中。
对于我的情况,这是解决方案:
- 添加
cookie-parser
(来自npm或yarn),例如:yarn add 'cookie-parser' --dev
- 然后在
devServer
中,使其像
const cookieParser = require('cookie-parser') // put at the top
...
devServer: {
before(app) {
app.use(cookieParser())
app.all('/my/route1/', (req, res) => {
const result = {msg: 'setting cookie'}
res.cookie('foo', 'bar') // set cookie
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify(result));
});
app.all('/my/route2', (req, res) => {
const result = {
my_cookie: req.cookies['foo'], // get cookie
}
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify(result));
});
},
}