谷歌经过ajax获取本地JSON文件，为何会提示跨域？

时间 2019-11-10

标签谷歌经过 ajax 获取本地 json 文件为何提示栏目 Chrome 繁體版

原文原文链接

在本地写了一段JSON代码，而后用ajax读取后，在浏览器打开，发现谷歌提示涉及到跨域问题，

可是跨域是因为协议，域名，端口中有一个不一样， 才会跨域，我在本地访问本身的文件，怎么和跨域扯上关系了？？

下面是代码

谷歌浏览器

火狐浏览器

一、为何会跨域？

要回答跨域，首先要从头来说。浏览器自己存在同源策略。如下理解是我整理网上的总结。

协议，域名，端口相同，视为同一个域，一个域内的脚本仅仅具备本域内的权限，能够理解为本域脚本只能读写本域内的资源，而没法访问其它域的资源。这种安全限制称为同源策略。
同源策略保证了资源的隔离。一个网站的脚本只能访问本身的资源，就像操做系统里进程不能访问另外一个进程的资源同样，若是没有同源策略，你在网站浏览，跳转其余网页，而后这个网页就能够跨域读取你网站中的信息，这样整个Web世界就无隐私可言了。这就是同源策略的重要性，它限制了这些行为。固然，在同一个域内，客户端脚本能够任意读写同源内的资源，前提是这个资源自己是可读可写的。

通俗的讲，浏览器有一个很重要的安全机制，即为同源策略：不用域的客户端脚本在无明确受权的状况下不能读取对方资源，跨域也就是不一样源。

回答了浏览器的同源策略，再回答一下跨域。

只要协议，域名，端口有一个不一样，就是跨域，
ajax请求一个目标地址为非本域（协议，域名，端口任意一个不一样）的web资源,就是跨域。

介绍了浏览器同源策略和跨域问题，接下来，开始回答正题。为何会跨域?

ajax请求一个目标地址为非本域（协议，域名，端口任意一个不一样）的web资源,就是跨域。

二、谷歌浏览器JSON出现了跨域问题，火狐JSON能够看到数据。这是为何？

既然跨域失败，就要找缘由。这很简单，跨域的三要素， 协议，域名，端口。确定有一个不同，才致使跨域问题的出现。

读取本地JSON代码，火狐能够正常读取到本地的JSON文件，

缘由是：虽然容许跨域很不安全，可是若是不跨域的话又带来不少不便。因此火狐是容许跨域的。

那么谷歌是怎么回事，为何谷歌获取不到，会出现跨域的问题？

这里要提一点，访问本地计算机中的文件，使用的是 file协议

file协议主要用于访问本地计算机中的文件，就如同在Windows资源管理器中打开文件同样，注意它是针对本地（本机）的，简单来讲，file协议是访问你本机的文件资源。

这么看来，谷歌报错的缘由已经很清楚了，控制台能够明显看到

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

跨源请求仅支持协议方案。：http, data, chrome, chrome-extension, https.

说白了就是，因为安全缘由浏览器不容许跨域访问，安全机制认为加载本地其余文件是跨域行为。谷歌浏览器会跨域失败，是由于浏览器安全机制不容许，而火狐为了方便容许跨域(虽然这样很不安全)。并且在其余浏览器中，出现跨域问题也是这个缘由，就是浏览器安全机制的缘由。

三、为何谷歌不支持跨域？

这个问题，网上搜索出来的全是怎么解决的，没人回答是为何？或者没有直接回答。

这是由于浏览器的安全策略，即禁止ajax访问本地的文件，这是不安全也是不容许的，举例的话，就至关于你访问了一个网站，而后这个网站就可以读取到你本地的文件，这种行为是不容许的。

四、怎么解决跨域问题？

一、前端人员使用的通常是JSONP进行跨域。

二、项目中使用nginx反向代理。

三、修改谷歌浏览器的配置。

四、在webstrom中打开。

这四种方法，前端人员本地最方便也是最实用的就是第一种，不建议使用第三种方法，你修改了浏览器的配置，难道让用户也修改浏览器的配置吗。

第二种方法，在项目中，会部署 nginx 反向代理，这里不作具体赘述。有须要的能够自行查找。

第四种方法，用在angula的路由中，webstrom中自带了一个本地服务器。会自动为你的文件开一个端口服务。

使用jsonp解决跨域：（仅适用于GET请求）
实现原理：<script> 标签是不受同源策略的限制的，它能够载入任意地方的 JavaScript 文件，而并不要求同源。
因此 JSONP 的理念就是，我和服务端约定好一个函数名，当我请求文件的时候，服务端返回一段 JavaScript。这段 JavaScript 调用了咱们约定好的函数，而且将数据当作参数传入。很是巧合的一点（其实并非），JSON 的数据格式和 JavaScript 语言里对象的格式正好相同。因此在咱们约定的函数里面能够直接使用这个对象。

直接上代码

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON文件的调用</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript" src="BW-JSON.js"></script>
<!--jsonp中须要注意的是
<script src="car.json?callback=train"></script>
src ? 以前为文件地址，? 以后为回调函数callback名称，
回调函数能够简写为 cb , 而后回调函数名称要与 JSON文件中的名称一致
能够在对应的文件名中看下，如，car.json?callback=loa,car.json的函数名为 train-->
<script src="car.json?cb=train"></script>
</html>
//JS代码就一个方法
function train (result){
console.log(result)
}
//JSON文件
train({
"status": "success",
"trainSystem": [
{
"key": "BX7",
"name": "BX7",
"img": ""
},
{
"key": "BX5",
"name": "BX5",
"img": ""
},
{
"key": "BX6",
"name": "BX6",
"img": ""
}
]
})