8

我们已经使用 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 编写的。

任何帮助，将不胜感激。

4

6 回答 6

6

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

就我而言，我有多个代理目标，因此我已经相应地配置了 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);
            }
        }
    }
}

代理会话.json

 //ProxySession.json
{
  "proxyTarget": "https://t.novare.me/",
  "build-type-1": {
     "JSESSIONID": "....",
     "msa": "....",
     "msa_rmc": ...."
   },
   "build-type-2": {
       "JSESSIONID": ".....",
       "msa": ".....",
       "msa_rmc":"....."
   }
}
于 2019-05-30T12:20:44.153 回答
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]);
        });
      },
于 2019-09-04T09:00:53.737 回答
1 
"/api/**": {
  ...
  cookieDomainRewrite: { "someDomain.com": "localhost" },
  withCredentials: true,
  ...
}
于 2021-06-04T12:38:41.283 回答
0

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

使用option.cookieDomainRewrite和option.cookiePathRewrite现在

于 2021-03-14T09:35:08.397 回答
0

你可以使用这个插件来安全地管理 webpack-dev-server 的 auth cookie：

典型的工作流程是：

  1. 为生产服务配置代理
  2. 登录生产站点，将经过身份验证的 cookie 复制到本地开发服务器
  3. 该插件会自动将您的 cookie 保存到系统钥匙串
于 2020-08-28T09:20:43.877 回答
-1

饼干 ？？ 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 } } } . . . . . . . . . . .

于 2020-02-29T01:19:39.503 回答