Access to XMLHttpRequest at ‘file:///D:/xx/xxx.json‘ from origin ‘null‘ has been blocked by CORS问题解决

问题：
在Chrome中的控制台输出错误的页面如下：
在这里插入图片描述

错误信息：

Access to XMLHttpRequest at 'file:///D:/xxxx/xxx.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

这里的xxx.json是本地的一个JSON文件。

发生场景：
在不启动服务器或不使用 sencha app watch启动开发服务器，而是以单个文件测试Ext JS相关功能，也就是使用Chrome直接打开一个本地的html文件。在该文件源码中，使用了proxy获取数据，数据源使用的是文件名为mydata.json的文件。

			proxy : {
				type : 'ajax',
				url : 'mydata.json',
			}

原因及解析：
在浏览器打开本地的html文件，上面proxy中的url获取的就是一个本地文件，协议是file://，如果是在服务器启动的话，则使用的是http或者https协议。
出于安全性考虑， Chrome默认禁止了这种用法，file协议和http/https协议不同，会被Chrome认为是跨域访问，所以会报被CORS(Cross-Origin Resource Sharing，跨域资源共享)的安全策略阻止。
关于跨域的基本介绍，可以参考跨域访问的相关概念及解决方法
虽然Chrome默认不允许这样使用，但是可以通过修改浏览器的配置或是设置启动参数允许访问，设置的参数是 --allow-file-access-from-files。

解决方法：

常见的有两种方式设置这个参数：

方式1，在命令行启动Chrome。
这里假设Chrome的安装路径是 C:\Program Files (x86)\Google\Chrome\Application\chrome.exe，则命令行启动命令如下：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

效果如下图：
在这里插入图片描述

方式2 ，设置快捷方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AkqM8szK-1649716469090)(images/screenshot_1587134729399.png)]

**注意： ** 需要先把运行的Chrome窗口全部关闭才能生效，否则即使修改也不生效。

Access to XMLHttpRequest at ‘file:///D:/xx/xxx.json‘ from origin ‘null‘ has been blocked by CORS问题解决

猜你喜欢