【vue踩坑记录】2、“no-referrer-when-downgrade”和“No 'Access-Control-Allow-Origin' header is pres”两类浏览器跨域请求问题

【前提】:想要打印输出测试通过后台接口发送请求是否成功获取的信息,接口的端口号是4000,本地项目跑起来的端口是8080,调试发现出现问题

【vue踩坑记录】2、“no-referrer-when-downgrade”和“No 'Access-Control-Allow-Origin' header is pres”两类浏览器跨域请求问题_第1张图片

【vue踩坑记录】2、“no-referrer-when-downgrade”和“No 'Access-Control-Allow-Origin' header is pres”两类浏览器跨域请求问题_第2张图片

【问题描述】跑起来,打开开发者工具,发现打印报错【vue踩坑记录】2、“no-referrer-when-downgrade”和“No 'Access-Control-Allow-Origin' header is pres”两类浏览器跨域请求问题_第3张图片

打开network,具体查明请求错误原因

【vue踩坑记录】2、“no-referrer-when-downgrade”和“No 'Access-Control-Allow-Origin' header is pres”两类浏览器跨域请求问题_第4张图片

【解释原因】:

从一个网站链接到另外一个网站会产生新的http请求,referrer是http请求中表示来源的字段。
no-referrer-when-downgrade表示从https协议降为http协议时不发送referrer给跳转网站的服务器。

【解决办法】:

检查后发现是是发送请求由https协议降为http协议,修改代码

 

再次跑起来,发现新问题:

【问题描述】:控制台打印报错如下

【vue踩坑记录】2、“no-referrer-when-downgrade”和“No 'Access-Control-Allow-Origin' header is pres”两类浏览器跨域请求问题_第5张图片

【解释原因】:翻译下,实际上是当使用ajax访问远程服务器时,请求失败,浏览器报如上错误。这是出于安全的考虑,默认禁止跨域访问导致的。

【vue踩坑记录】2、“no-referrer-when-downgrade”和“No 'Access-Control-Allow-Origin' header is pres”两类浏览器跨域请求问题_第6张图片

【解决方案】:

常用的解决方案有两种,可以分为客户端解决方案和服务器端解决方案。先说服务器端解决方案:

    • 服务器端解决方案 :服务器告诉浏览器你允许我跨域
      在服务器端的filter或者servlet里面添加 
      response.setHeader("Access-Control-Allow-Origin", "*"); 
      “Access-Control-Allow-Origin”表示允许跨域访问,“*”表示允许所有来源进行跨域访问,这里也可以替换为特定的域名或ip。 
      很显然,这种方式对非网站拥有人员来说是不能做到的。而且此种方式很容易受到CSRF攻击。

    • 客户器端解决方案 :蒙蔽浏览器,让浏览器觉得你没有跨域(本质上其实还是跨域了)
       

这里采取第二种解决方案:

1、将匹配路径修改为

2、打开config配置文件下的index.js修改配置,使用proxyTable代理实现跨域

【vue踩坑记录】2、“no-referrer-when-downgrade”和“No 'Access-Control-Allow-Origin' header is pres”两类浏览器跨域请求问题_第7张图片

修改后为:

【vue踩坑记录】2、“no-referrer-when-downgrade”和“No 'Access-Control-Allow-Origin' header is pres”两类浏览器跨域请求问题_第8张图片

重新打包运行,打开控制台,发现此时数据已经获得,成功解决:

【vue踩坑记录】2、“no-referrer-when-downgrade”和“No 'Access-Control-Allow-Origin' header is pres”两类浏览器跨域请求问题_第9张图片

你可能感兴趣的:(Vue,踩坑)