关于个人Vue笔记项目跨域发生的bug处理

157 阅读1分钟

juejin.cn/post/714131…

我的这篇博客里写了如何进行和接口前后端联调的内容。

但实际测试时发现bug。

明明已经登录,但得到的接口传回来的message却是报错,没有登录。

image.png


处理过程

研究

经过网上查询已经咨询经验者,发现该问题是由于chrome在2020年3月份升级了安全策略,对于跨域请求如果想写入cookie,必须是https的网站才可以。对于http的网站,cookie写入总是失败。所以无法记录我们的cookie。永远登录不上。

解决

那么该如何处理呢?

1.首先打开build/webpack.dev.conf.js,在DevServer里加一句

https: true,

image.png

2.接着将我们的接口也换成https。

3.运行npm start

image.png

将这个端口也改成https,粘贴到地址栏打开。

image.png

这时打开会被chrome警告,因为Chrome不信任这些自签名ssl证书,为了安全起见,直接禁止访问了。不用慌,点选高级,继续前往网站即可。

image.png

再次打开我们的网站,登录即可正常进行了。