谷歌浏览器跨域问题

最新推荐文章于 2024-02-28 15:32:08 发布

ylhsuper

最新推荐文章于 2024-02-28 15:32:08 发布

阅读量458

点赞数

本文链接：https://blog.csdn.net/ylhsuper/article/details/61921278

版权

最近在做项目时候，用到借鉴easyUI框架的时候，在官网下载的表格冻结功能的时候，出现了json文件中json数据展示不到表格的问题，浏览器控制台报跨域的问题。官网和报错截图如下，

效果：

demo源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
	<!-- <link rel="stylesheet" type="text/css" href="css/easyui.css">
	<link rel="stylesheet" type="text/css" href="css/icon.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script> -->
</head>
<body>
	<h1>Frozen Columns for DataGrid</h1>
	<table id="tt" title="Frozen Columns" class="easyui-datagrid" style="width:500px;height:250px"
			url="data/datagrid_data.json"
			singleSelect="true" iconCls="icon-save">
		<thead frozen="true">
			<tr>
				<th field="itemid" width="80">Item ID</th>
				<th field="productid" width="80">Product ID</th>
			</tr>
		</thead>
		<thead>
			<tr>
				<th field="listprice" width="80" align="right">List Price</th>
				<th field="unitcost" width="80" align="right">Unit Cost</th>
				<th field="attr1" width="150">Attribute</th>
				<th field="status" width="60" align="center">Stauts</th>
			</tr>
		</thead>
	</table>
</body>
</html>

分析：

点开左边的箭头，看看是什么js报的错。可能是因为，你用了第三方地址的js，然后第三方js里的ajax去请求你本地文件，就可能导致跨域。

解决方法：把它里面引用的第三方的js，都下载到本地引用。因为，ajax不能跨网站去请求其它地址的函数等，除非用jsonp 。

结果发现还是报XMLHttpRequest cannot load file:///T:/EasyUI/jeasyui-datagrid-datagrid5/data/datagrid_data.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.及是ajax跨域的问题。为了节省时间，在谷歌浏览器的属性里面设置改下就可以了，

打开Chrome快捷方式的属性中设置：

右击Chrome浏览器快捷方式，选择“属性”，

在“目标”中加上"--allow-file-access-from-files"，注意前面有个空格，

重启Chrome浏览器便可。

下面是别人的博客上 http://blog.csdn.net/dandanzmc/article/details/31344267/ 看的内容感觉不错，就留下了自己可以多看看。hh!

分析

一出现这个错误，我就猜到是加载.json文件的问题，先前，在做----的时候，就接触了Easyui，也接触了json，那时是将从数据库中返回的datatable中的数据转换为json数据，然后加载到表格中，所以，这个时候我最先想到的是json数据格式的原因，按照先前在的json数据格式改了后，仍然出现这个错误。当我把.json文件中的数据写到代码中时，加载正常。所以说这就不是json数据格式的原因了。

原因

这就让我不得不想想是否是其他的原因了，后来，通过一番查询，找到了原因。

原因如下：

Chrome不支持本地Ajax请求，当我在.html文件中访问.json文件时就会出现这个问题，就是说这个时候不能加载这个.html文件。

解决方式

打开Chrome快捷方式的属性中设置：

右击Chrome浏览器快捷方式，选择“属性”，

在“目标”中加上"--allow-file-access-from-files"，注意前面有个空格，

重启Chrome浏览器便可。

这样就正常加载了。

ylhsuper

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
谷歌浏览器跨域问题

最近在做项目时候，用到借鉴easyUI框架的时候，在官网下载的表格冻结功能的时候，出现了json文件中json数据展示不到表格的问题，浏览器控制台报跨域的问题。官网和报错截图如下， demo源码： jQuery EasyUI Demo --> Frozen Columns for DataGrid
复制链接

扫一扫