How to implement webpack-dev-server to share cookie from server-side page?
I am currently building a reactjs app that uses server side cookie for authentication. I am trying to use webpack-dev-server for development.
In the current scenario, I have a webpack-dev server hosted on one domain and an application server on a different domain, but I need to share a cookie on both of them.
I figured cookies don't work across domains, but is there a way I can hack this to share them for a development environment?
I am currently trying to embed a devserver iframe in my app server url. However, since they have different hostnames, cookies cannot be shared. Then I realized that cookies can be shared between subdomains, but cannot figure out how to assign different ports under localhost to different subdomains.
Suggestions and feedback would be really appreciated.
source to share
I decided to solve this scenario using the webpack-dev-server proxy feature.
//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')
});
So devServer (port: 3000) displays a page from the server (port: 8000) that allows the interface to receive and use cookies from the server.
source to share
For those who use react-scripts , that is, they launch the application via the command line:
$ npm start
here is my .json package that solves this problem:
{
"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"
}
}
}
where my backend is running at http: // localhost: 8080 .
source to share