浏览器跨域

常见的跨域问题

今天在测试提出以一个问题，具体情形不说了，就是报错出现了这么个问题：

1
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

一眼看出就是跨域问题，说也奇怪，每次发送请求都是直接报错，但是请求还是可以正常发送成功，就是不能执行正确的回调函数了，如下：

1
2
3
4
5
6
7
8

var successHandler=function(res){
	callback(res);
};
var errorHandler = function(errorInfo) {
	alert(errorInfo);
};
HGIS.Utils.send(routeNetAnlyseURL.shortestPathPoints,param,"POST","json",successHandler,errorHandler);

具体情形就是：每次发送请求HGIS.Utils.send的请求，它就立即直接回调errorHandler返回了，但是通过监听Network中该请求，当处理errorHandler时，该网络请求为阻塞状态，当点击alert中的确定按钮后console中提示上面的跨域错误信息，但是网络请求居然可以请求成功，并且返回正确的结果。不过这个正确的结果没有走我的successHandler函数。

出现跨域问题可以理解，毕竟我的html是离线文件。疑惑的是之前测试的时候就没有问题，可以正常访问，为啥现在出现这个问题了呢，说是跨域，可明明可以访问的到，为啥就不按我设定的流程走呢？

寻找陈老师帮忙，首先确定这个跨域是浏览器拦截的，相当与在网络请求没有发出时就没浏览器给提前处理了，直接进入错误处理流程。

如何让浏览器可以进行跨域的请求的，通过百度https://www.cnblogs.com/micua/p/chrome-file-protocol-support-ajax.html找到一个方法。

  • 在桌面建立一个chrome的快捷方式
  • 右键该快捷方式，点击属性
  • 在属性-快捷方式-目标框中后天添加--allow-file-access-from-files，注意该字符串之前要有一个空格键，最终的结果可能是"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files；
  • 然后关闭所有的chrome浏览器，再双击该快捷方式打开浏览器
  • 最后将离线html文件拖入浏览器即可

问题解决了，可以为啥会出现这么问题呢，为啥上个月的时候不用有这些设置就可以正常访问呢？

原因是浏览器版本的缘故，原来由于某些原因，我本地的chrome被更新到最新的版本了

1
2
3
Google Chrome 已是最新版本

版本 65.0.3325.181（正式版本） （64 位）

，而chrome最新版本增强了对网络请求的安全限制

最后查看chrome的安装位置，发现确实是在一周前的时候我的浏览器被更新了