【vue踩坑记录】2、“no-referrer-when-downgrade”和“No 'Access-Control-Allow-Origin' header is pres”两类浏览器跨域请求问题
【前提】:想要打印输出测试通过后台接口发送请求是否成功获取的信息,接口的端口号是4000,本地项目跑起来的端口是8080,调试发现出现问题【问题描述】跑起来,打开开发者工具,发现打印报错打开network,具体查明请求错误原因【解释原因】:从一个网站链接到另外一个网站会产生新的http请求,referrer是http请求中表示来源的字段。no-referrer-whe...
【前提】:想要打印输出测试通过后台接口发送请求是否成功获取的信息,接口的端口号是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代理实现跨域
修改后为:
重新打包运行,打开控制台,发现此时数据已经获得,成功解决:
更多推荐
所有评论(0)