如何实现webpack开发服务器从服务器端呈现页面共享cookie？

Question

我目前正在构建reactjs应用程序，它使用服务器端cookie进行身份验证。我正在尝试使用webpack开发服务器。

在当前的情况下，我的webpack开发服务器托管在一个域上，应用服务器在另一个域上，但我需要在这两个域中共享cookie。

我认为cookies不适用于不同的域，但是有什么方法可以让它们在开发环境中共享它吗?

目前，我正在尝试将devserver的iframe嵌入到应用服务器的url中。但是，由于它们有不同的主机名，所以不能共享cookie。然后，我发现cookies可以跨子域共享，但无法解决如何将本地主机下的不同端口分配给不同的子域。

建议和反馈将是非常感谢的。

Answer 1

最后，我使用webpack开发服务器的代理服务器特性解决了这个场景。

//dev-server.js

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.config')

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  inline: true,
  historyApiFallback: true,
  proxy: {
    "**": "http://localhost:8000"
  }
}).listen(3000, '0.0.0.0', function (err, result) {
  if (err) {
    console.log(err)
  }

  console.log('Listening at 0.0.0.0:3000')
});

通过这种方式，devServer (端口: 3000)从服务器呈现页面(端口: 8000)，允许前端从服务器接收和使用cookie。

Answer 2

对于使用反应-脚本的用户，即通过命令行运行应用程序：

$ npm start

下面是解决这个问题的package.json：

{
  "name": "systematic",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
     "...": "..."
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": {
    "/backend": {
      "target": "http://localhost:8080"
    }
  }
}

我的后端在地址http://localhost:8080上运行在哪里。