logo标签列表

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

reactjsproxywebpack-dev-serverwebpack-dev-middleware
12

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

在服务器上我们有一个通用的登录页面，我们在所有应用程序中都使用它。当它被调用时，它会设置一个会话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错误。

在这一点上，应用程序中没有执行任何代码。我们是否需要在常见的登录页面中执行某些操作以设置cookie？

该应用程序使用React编写。

将不胜感激任何帮助。

6个回答
7

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

在我的情况下，我有多个代理目标，因此我相应地配置了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":"....."
   }
}
这真的帮了我很多！我的团队有一个Flask应用程序作为后端，我们使用会话cookie进行服务。我们从后端提供的站点中获取cookie并将其放入（未提交的）文件中，然后在代理期间读取该值。再次感谢！ - gonzofish
3

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

这经过验证是有效的，但不是动态的。

  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]);
        });
      },
2
"/api/**": {
  ...
  cookieDomainRewrite: { "someDomain.com": "localhost" },
  withCredentials: true,
  ...
}
0
0

您可以使用此插件来安全地管理webpack-dev-server的身份验证cookie：

典型的工作流程如下：

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

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

这段代码是关于开发服务器的设置，其中https为真时开启cookies选项。代理中withCredentials为true时，允许在跨域请求时发送cookies。

这对我有用。我还必须按照Chad Carter的示例添加证书：https://dev59.com/tFcO5IYBdhLWcg3wcRJk#57226788 - camiel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接