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并从那里获取JSESSIONID ID。

注意：这种方法不是动态的。您必须登录到您希望您的应用程序代理的应用程序，然后手动添加图片 JSESSIONID并将其添加到JSON文件中，或直接在onProxyReq中进行替换功能，然后运行您的开发服务器。

 // 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文件。

{
  "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

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

典型的工作流程为：

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

Answer 4

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

现在使用 option.cookieDomainRewrite 和 option.cookiePathRewrite

Answer 5

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

Answer 6

cookie ?? 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 } } } . . . . . . . . . . .

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

6 个答案: