JS获取本地数据：jsonp解决浏览器跨域问题

2019-04-28 本文已影响0人蜗牛_Cy

有时，页面中有大量数据，而这些数据是静态的，无需从后台获取。这时我们可能需要将这些数据单独存放在一个json文件中，方便管理。
想到获取数据，我第一个想到的就是使用ajax获取数据。
来测试一下：

<script type="text/javascript">
    $(function () {
      $.ajax({
        type: 'get',
        url: './text.json',
        success: function (data) {
          console.log(data)
        }
      } )
    })
  </script>

在火狐浏览器运行成功获取json数据如下图。虽然提示“xml语法错误”，这个问题不影响程序运行，暂且不考虑。

火狐浏览器运行结果

在谷歌浏览器中运行，竟然不能获取数据。这就奇怪了，同样的代码在谷歌浏览器里执行不下去了。

谷歌浏览器运行结果
通过在火狐浏览器能运行成功，可得知这段代码本身没有错误，查看错误提示信息，原来是请求出现了跨域。
就这个问题来一探究竟···

那么为什么会出现跨域问题呢？

要回答跨域问题，首先要弄清楚什么是浏览器的同源策略。

协议、域名、端口相同视为统一域，一个域内的脚本只有本域有权访问。可以理解为，本域内的脚本只有读写本域内的资源，而无法访问其他域内的资源。这种安全称为同源策略。
同源策略保证了资源的隔离。一个网站的脚本只能方位自己的资源，就想操作系统里的进程不能访问另一个进程的资源一样。如果没有同源策略，你在网站浏览，跳转其他网页，然后这个网页就可以跨域读取你网站的信息，这样整个web世界就没有隐私可言了。这就是同源策略的重要性，他限制了这些行动。当然在同一个域内，客户端脚本可以任意读取同源内的资源，前提是这个资源本身是可读可写的。

回答完浏览器的同源策略再来说什么是跨域。

只要协议、域名、端口有一个不同就是跨域
ajax请求一个非本域的web资源就是跨域

接下来说说为什么谷歌提示跨域而火狐没有提示

谷歌浏览器既然找不到资源，肯定是出现了跨域问题，那么一定是协议、域名或者端口有一个不统一。
这里要提一点，访问本地计算机里的文件，使用的是file协议（file协议主要用于访问本地资源）
这样的话谷歌报错是有理有据的。
在看控制台提示
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

跨源请求仅支持协议方案。：http, data, chrome, chrome-extension, https.
说白了就是，由于安全原因浏览器不允许跨域访问，安全机制认为加载本地其他文件是跨域行为。谷歌浏览器会跨域失败，是因为浏览器安全机制不允许，而火狐为了方便允许跨域(虽然这样很不安全)。而且在其他浏览器中，出现跨域问题也是这个原因，就是浏览器安全机制的原因。

为什么谷歌不支持跨域？

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

怎么解决跨域问题？

1、前端人员使用的一般是JSONP进行跨域。
2、项目中使用nginx反向代理。
3、修改谷歌浏览器的配置。
4、在webstrom中打开。
这四种方法，前端人员本地最方便也是最实用的就是第一种，不建议使用第三种方法，你修改了浏览器的配置，难道让用户也修改浏览器的配置吗。
第二种方法，在项目中，会部署 nginx 反向代理，这里不做具体赘述。有需要的可以自行查找。
第四种方法，用在angula的路由中，webstrom中自带了一个本地服务器。会自动为你的文件开一个端口服务。

使用jsonp解决跨域（仅适用于get请求）

实现原理<script>标签是不接受同源策略的他可以载入任意地方的JavaScript文件，而并不要求同源。所以jsonp的理念就是，我和服务端约定好一个函数名，当我请求文件的时候，服务端返回一段JavaScript，这段JavaScript调用了我们约定好的函数，并且将数据当做参数传入。非常巧合的一点，json的数据格式和JavaScript语言中的对象格式正好相同。所以我们约定好的函数里可以直接使用这个对象。
代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="../jquery-1.10.2.min.js"></script>
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
    function dataInit(data){
      console.log(data)
    }
  </script>
  <script type="text/javascript" src="./text.json?callback=dataInit"></script>
//值得注意的是
// src ? 之前为文件地址，? 之后为回调函数callback名称，    
//回调函数可以简写为 cb ,  然后 回调函数 名称要与  JSON文件中的名称一致 
</body>
</html>

json文件 text.json
dataInit([{
    "name": "zangsan",
    "sex": "6"
  },
  {
    "name": "李四",
    "sex": "8"
  }
])

为什么可以这样写的原因：
function dataInit(data){
console.log(data)
}
这里先定义了一个函数，用于输出数据data；
<script type="text/javascript" src="./text.json?callback=dataInit"></script>
当通过script标签成功获得text.json文件时，浏览器立即执行文件中的内容。text.json文件中本质是调用这个函数并传入数据。
这样就解释清楚了。