设置axios.defaults.withCredentials = true失效

现象

在项目中,因为跨域关系,前端需要设置 axios.defaults.withCredentials = true ,这样才能进行跨域操作。
但是设置了之后也依旧报错。

原因

chrome在2020年3月份升级了安全策略,对于跨域请求如果想写入cookie,必须是https的网站才可以。对于http的网站,cookie写入总是失败。

解决

配置 webpack-dev-server,在开发时使用https的链接。以下是操作说明:

  • 第一步

    修改build/webpack.dev.conf 文件,在devServer里添加https: true, 如下图:
    image
  • 第二步
    执行 npm start, 浏览器输入 https://localhost:8080 。注意是https, 不是 http
    此时并不能打开页面,而是显示如下

    image

    解决:就是在当前页面用键盘输入 thisisunsafe ,不是在地址栏输入,就直接敲键盘就行了,页面即会自动刷新进入网页。
    因为Chrome不信任这些自签名ssl证书,为了安全起见,直接禁止访问了,thisisunsafe 这个命令,说明你已经了解并确认这是个不安全的网站,你仍要访问就给你访问了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容