如何实现webpack-dev-server共享服务器端渲染页面的cookie？

Question

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

在当前情况下，我将webpack-dev-server托管在一个域上，将应用程序服务器托管在另一个域上，但我需要在它们两者之间共享cookie。

我明白cookie在不同域中无法工作，但是否有一种方法可以绕过此问题，在开发环境中共享cookie？

目前，我正尝试在应用程序服务器的url中嵌入devserver的iframe。 但由于它们具有不同的主机名，因此无法共享cookie。 然后，我发现cookie可以跨子域共享，但不知道如何为本地主机下的不同子域分配不同的端口。

非常感谢您的建议和反馈。

- Sudhir Shrestha

Answer 1

我最终使用 webpack-dev-server 的代理服务器功能解决了这个问题。

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

- Sudhir Shrestha

Answer 2

对于那些使用react-scripts，也就是通过命令行运行应用程序的人：

$ 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 上。

- Cyrusmith