webpack-dev-server 通过代理设置 cookie

Question

我们已经使用 webpack-dev-server 设置了我们的开发环境。我们使用它的代理配置与后端通信。

我们在所有应用程序中使用的服务器中有一个通用的登录页面。我们调用它，它设置一个会话 cookie，该 cookie 期望与后续请求一起传递。我们使用了以下配置，但由于某种原因未在浏览器中设置 cookie。我可以在开发工具的网络选项卡中的响应标头中看到它。

const config = {
  devServer: {
     index: "/",
     proxy: {
     "/rest_end_point/page": {
           target: "https://middleware_server",
           secure : false
     },         
     "/": {
           target: "https://middleware_server/app/login",
           secure : false
    },        
}

https://middleware_server/app/login 端点返回带有 set-cookie 标头的登录页面。

代理用于在访问登录页面和 API 调用时避免 CORS 错误。

到目前为止，没有执行来自应用程序的代码。我们必须在 coomon 登录页面中做些什么来获取 cookie 集吗？

应用程序是用 React 编写的。

任何帮助将不胜感激。

Answer 1

我有同样的用例，这就是我所做的。

就我而言，我有多个代理目标，因此我已相应地配置了 JSON (ProxySession.json)。

注意：这种方法不是动态的。您需要为请求的代理手动获取 JSESSIONID（会话 ID）。

登录到您希望应用程序代理的应用程序。 获取 JSESSIONID 并将其添加到 JSON 文件中或直接在 onProxyReq 函数中替换，然后运行您的开发服务器。

例子：

Webpack-dev.js

 // Webpack-dev.js
const ProxySession = require("./ProxySession");

config = {
  output: {..........},
  plugins: [.......],
  resolve: {......},
  module: {
    rules: [......]
  },
  devServer: {
    port: 8088,
    host: "0.0.0.0",
    disableHostCheck: true,
    proxy: {
        "/service/**": {
            target: ProxySession.proxyTarget,
            changeOrigin: true,
            onProxyReq: function(proxyReq) {
                proxyReq.setHeader("Cookie", "JSESSIONID=" + ProxySession[buildType].JSESSIONID + ";msa=" + ProxySession[buildType].msa + ";msa_rmc=" + ProxySession[buildType].msa_rmc + ";msa_rmc_disabled=" + ProxySession[buildType].msa_rmc);
            }
        },
        "/j_spring_security_check": {
            target: ProxySession.proxyTarget,
            changeOrigin: true
        },
        "/app_service/websock/**": {
            target: ProxySession.proxyTarget,
            changeOrigin: true,
            onProxyReq: function(proxyReq) {
                proxyReq.setHeader("Cookie", "JSESSIONID=" + ProxySession[buildType].JSESSIONID + ";msa=" + ProxySession[buildType].msa + ";msa_rmc=" + ProxySession[buildType].msa_rmc + ";msa_rmc_disabled=" + ProxySession[buildType].msa_rmc);
            }
        }
    }
}

ProxySession.json

 //ProxySession.json
{
  "proxyTarget": "https://t.novare.me/",
  "build-type-1": {
     "JSESSIONID": "....",
     "msa": "....",
     "msa_rmc": ...."
   },
   "build-type-2": {
       "JSESSIONID": ".....",
       "msa": ".....",
       "msa_rmc":"....."
   }
}

Answer 2

我遇到了完全相同的问题，并通过这种方式解决了它：

这是经过验证和工作的，但它不是动态的。

  proxy: {
    '/my-bff': {
      target: 'https://my.domain.com/my-bff',
      changeOrigin: true,
      pathRewrite: { '^/my-bff': '' },
      withCredentials: true,
      headers: { Cookie: 'myToken=jx42NAQSFRwXJjyQLoax_sw7h1SdYGXog-gZL9bjFU7' },
    },
  },

要使其成为动态方式，您应该代理登录目标，并附加 onProxyRes 以中继 cookie，例如：（尚未验证）

      onProxyRes: (proxyRes: any, req: any, res: any) => {
        Object.keys(proxyRes.headers).forEach(key => {
          res.append(key, proxyRes.headers[key]);
        });
      },

Answer 3

"/api/**": {
  ...
  cookieDomainRewrite: { "someDomain.com": "localhost" },
  withCredentials: true,
  ...
}

Answer 4

您可以使用this plugin 安全地管理 webpack-dev-server 的身份验证 cookie：

典型的工作流程是：

1. 为生产服务配置代理
2. 登录生产站点，将经过身份验证的 cookie 复制到本地开发服务器
3. 插件会自动将您的 cookie 保存到系统钥匙串中

Answer 5

https://github.com/chimurai/http-proxy-middleware#http-proxy-options

现在使用option.cookieDomainRewrite 和option.cookiePathRewrite

Answer 6

饼干 ?? devServer: { https: true, < ------------ on cookies host: "127.0.0.1", port: 9090, proxy: { "/s": { target: "https://xx < --- https secure: false, //pathRewrite: { "^/s": "/s" }, changeOrigin: true, withCredentials: true } } } . . . . . . . . . . .