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

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

【问题描述】跑起来，打开开发者工具，发现打印报错

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

【解释原因】：

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

【解决办法】：

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

 

再次跑起来，发现新问题：

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

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

【解决方案】：

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

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

  • 客户器端解决方案 ：蒙蔽浏览器，让浏览器觉得你没有跨域（本质上其实还是跨域了）
     

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

1、将匹配路径修改为

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

修改后为：

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