2020-03-23 Chrome 本地热启动，Web管理系统，Cookie失效 (Chrome80版本增强安全性)

2020-03-23

尽力还原的事情经过

1. 在已存在的vue,webpack4项目中；引入自动化测试(像Angular-cli构建出的那种test)
2. 查阅了一些资料如下

友情链接 Vue Test Utils + Karma

友情链接 vue-cli3 karma单元测试的实现

 

3. 之前采用node v8.4.9 版本(现有项目)；为了安装 Angular 又下载了 node v12.6.1;
4. 因为需要，两个nodeJS版本我要随时的切换，npm版本也跟着切换
5. Angular 总是创建失败 ；自己又买坑了 (npm 全局又安装了一个版本 非常老的版本) ；发现后删除了全局的
6. 之后按照上面的资料引入了三方依赖
7. 在未写测试用例的情况下，只运行是否能启动；(可以启动)
8. 这期间总出现 下面一个错误。

Browserslist: caniuse-lite is outdated. Please run next command 'npm update'

9. 还没来的处理这个问题，发生了文章标题的问题

Chrome: 登录成功后，又跳转至登录页； 火狐: 登录正常

经过分析及阅读现有代码，分析结果如下

后台管理系统
 * 查看http请求记录，页面跳转是登录失败导致的
 * 登录状态是存储在Cookie

综上得出
 * Chrome浏览器，禁用了Cookie

经过浏览器设置的检查
 * Chrome浏览器，未禁用Cookie
 * 尝试过
    1 Cookie禁用后，再次开启
    2 重置浏览器
    3 覆盖安装 浏览器
   结果
    问题依然存在

 * 发现仅这个热启动项目不好使，部署在开发服务器的的系统可以正常

2020-03-24

友情链接 类似的问题，但不相同

分析产生 Browserslist 问题

1. 为了做test，安装了其他插件
2. 因为有要修改代码，上传至git服务器(pull的时候冲突)，我把package.json文件回滚了
3. node_modules 中才存在安装过的记录
4. 所以提示那个错误，但不影响系统的本地热启动

友情链接 解决Browserslist: caniuse-lite is outdated

重新 安装做test用到插件
我这边安装又遇到问题了 删除node_module，重新来； 本地依赖关系打乱了，清除方案最佳

#
#
npm install --save-dev @vue/test-utils karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha

仿Angular的karma配置文件

module.exports = function (config) {
  config.set({
    basePaht: '',
    frameworks: ['mocha'],
    // plugins: [
    //   require('karma-mocha'),
    //   require('karma-chrome-launcher'),
    //   require('karma-spec-reporter'),
    //   require('@vue/test-utils')
    // ],
    client: {
      clearContext: false // leave Spec Runner output visible in browser
    },
    files: [
      'tests/**/*.spec.js' // tests目录下，所有.spce.js结尾的测试文件
    ],
    preprocessors: {
      '**/*.spec.js': ['webpack', 'sourcemap']
    },
    webpack: webpackConfig,
    reporters: ['spec'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
    // browsers: ['ChromeHeadless']
  })
}

package.json script 的脚本 Karma 测试启动成功

"scripts": {
    "test": "./node_modules/.bin/karma start"
}

本文主要问题还是未定位出来，本地浏览器到底发生了什么问题

尝试方法
  * 修改本地服务启动的端口号(项目原端口为7789 =>  7799) => 问题依然存在

继续观察发现 Chrome 每次请求的 JSESSIONID 不同

在网上淘问题发现，一样现象的问题

友情链接： 原文

我本地Chrome版本 !!!! Chrome 做了升级 QAQ

下面附上 阮一峰老师的博文 之前使用的版本已经超过51了 QAQ 不知道自己做了神操作

友情链接: 阮一峰老师原文地址

有疑问继续找资料

友情链接

友情链接：了解Chrome 80

:7799/#/:1 A cookie associated with a cross-site resource at http://192.168.109.178/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

后来采用了 卸载Chrome80 安装 Chrome 79 测试没有 文章标题中的问题

重新安装升级是 Chrome80 !!! 问题复现