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

问题描述

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

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

const 配置 = {开发服务器:{指数: "/"，代理人: {/rest_end_point/page":{目标:https://middleware_server"，安全:假},/":{目标:https://middleware_server/app/login"，安全:假},}

https://middleware_server/app/login 端点返回登录页面使用 set-cookie 标头.

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

到目前为止，没有执行应用程序中的代码.我们是否必须在 coomon 登录页面中执行某些操作才能获取 cookie 设置?

应用程序是用 React 编写的.

任何帮助将不胜感激.

解决方案

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

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

注意:这种方法不是动态的.您需要为请求的代理手动获取 JSESSIONID(会话 ID).

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

示例:

Webpack-dev.js

//Webpack-dev.jsconst ProxySession = require("./ProxySession");配置 = {输出: {..........}，插件:[......]，解决: {......}，模块: {规则: [......]},开发服务器:{端口:8088，主机:0.0.0.0"，disableHostCheck: 真,代理人: {/服务/**":{目标:ProxySession.proxyTarget，changeOrigin: 真,onProxyReq:函数(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":{目标:ProxySession.proxyTarget，更改来源:true},/app_service/websock/**":{目标:ProxySession.proxyTarget，changeOrigin: 真,onProxyReq:函数(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.novar.me/"，构建类型 1":{JSESSIONID":……"，msa":......"，msa_rmc":...."},构建类型 2":{JSESSIONID":……"，msa":......"，msa_rmc":......"}}

We have setup our development environment with webpack-dev-server. We use its proxy config to communicate with the backend.

We have a common login page in the server which we use in all our applications. We it is called, it sets a session cookie which expected to passed with subsequent requests. We have used the following config but the cookie is not set in the browser for some reason. I can see it in response header in the network tab of dev tool.

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

The https://middleware_server/app/login endpoint returns the login page with the set-cookie header.

The proxy is used to avoid CORS errors when accessing login pages and API calls.

Upto this point no code from the application is executed. Do we have to do something in the coomon login page to get the cookie set?

the application is written with React.

Any help would be appreciated.

解决方案

I have the same use case and this is what I have done.

In my case, I have multiple proxy targets so I have configured the JSON (ProxySession.json) accordingly.

Example:

 // 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":"....."
   }
}

这篇关于webpack-dev-server 通过代理设置 cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！