wepack-dev-server无法传递cookie到后端的问题

现象

1：后端是JAVA springmvc，前端使用 wepack3 + vue2，前后端分离。目录结构为vue-cli2生成的结构。 本机开发 采用webpack-dev-server 启动本地localhost 请求转发到部署在服务器上的后端接口。 package.json 类似于如下结构

{
  "name": "xxx",
  "version": "2.0.0",
  "description": "xxx",
  "author": "xxx",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js",
    "lint": "eslint --fix --ext .js,.vue src",
    "build:dll": "webpack --config build/webpack.dll.conf.js"
  },
  "dependencies": {
    "axios": "^0.16.1",
    ...
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    ...
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 5 versions",
    "Android >= 4.0",
    "not ie <= 8"
  ]
}

发现前端在发送请求的时候无法把cookie传递到后端。猜测是因为webpack-dev-server无法将cookie传递给后端，一些需要用到cookie的接口就失效了。

使用charles

此时想起抓包工具charles 可以辅助转发请求。在Tools=>Map Remote中配置localhost:8080下接口转发到开发环境后端接口10.1.90.49：127上。此时出现了一个新的问题。charles抓取localhost下的接口并不是每次都成功。每隔几分钟就需要重启一次charles。查询charles官网查到了一些说法，地址如下

www.charlesproxy.com/documentati…

大意就是 有一些机器的 localhost 无法被charles抓包，需要用 localhost.charlesproxy.com/ 或者本机 ip 来替代 localhost。 于是我把 localhost 换成了 本地 ip来请求。发现 wepack-dev-server启动的代码无法用本机ip请求，报错 Invalid Host header。

修改webpack配置

查找Invalid host header 关键字。搜索到如下说法

通过服务器域名访问时是显示Invalid Host header，这是由于新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的，将中断访问。可以在build目录中的webpack.base.config.js中添加如下webpack-dev-server配置：devServer: { disableHostCheck: true, },

在webpack.dev.conf.js中添加：disableHostCheck: true
 
devServer: {
 public: 'local.kingsum.biz',
 clientLogLevel: 'warning',
 historyApiFallback: true,
hot: true,
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
 
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin

watchOptions: {
poll: config.dev.poll,
},
disableHostCheck: true     加上这段
}

此时已经解决 invalid host name 问题，但仍无法使用本机IP请求本地前端服务 增加第二处修改找到 your-project/package.json 在末尾增加 --host 0.0.0.0

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" --host 0.0.0.0

此时再在charles中配置 本机 192.168.10.212(your ipv4) 到后端的请求之后。成功将cookie带过去了.

后续

我司的项目后来更新到vue-cli3构建了。vue-cli3 默认使用webpack4，相当多的配置都内置了。只留下了 vue.config.js 文件。此时cookie跨域传递的问题已经得到解决。 只需要在vue.config.js 中增加配置 cookieDomainRewrite 即可保证cookie跨域传递

devServer: {
    proxy: {
      '/testaaa': {
        target: 'http://10.1.90.49:90',
        changeOrigin: true,
        autoRewrite: true,
        cookieDomainRewrite:{
          '*':'localhost'
        }
      },

再后续

vue-cli3 中增加 cookieDomainRewrite 属性并不能保证IE浏览器中cookie跨域传递成功。在IE浏览器中 仍可以使用charles代理的方式来保证cookie传递。