利用jsonp解决读取本地.json文件产生CORS跨域问题

CORS跨域

跨域资源共享（Cross-Origin Resource Sharing，CORS）是一种用于在Web应用程序中处理跨域请求的机制。跨域请求发生在浏览器中，当一个网页上的脚本尝试去请求另一个域下的资源时，就会触发跨域请求。

跨域请求通常是出于安全原因而受限制的，因为浏览器实施了同源策略（Same-Origin Policy），该策略限制了页面上的脚本只能访问与其来源相同的资源。跨域请求涉及到不同域、协议或端口，因此会受到同源策略的限制。

CORS机制通过在HTTP头部添加一些特定的字段，允许服务器声明哪些来源（域、协议、端口）是被允许访问资源的。在客户端发起跨域请求时，浏览器会首先发送一个预检请求（Preflight Request），该请求使用OPTIONS方法，询问服务器是否允许实际的跨域请求。如果服务器确认允许，浏览器会发送实际的请求。

简单来说就是浏览器出于安全考虑会禁止访问不同端口的不同服务器，想象你的网站在运行在www.example.com，而你想在网页上加载来自api.example-api.com的数据。由于安全原因，浏览器默认会阻止这样的操作，这就是跨域问题。

故此时双击你的nidex.html直接用

$.getJSON('json/index.json', function(data) {
    // 处理 JSON 数据
    console.log(data);
  })
  .fail(function(error) {
    // 处理错误
    console.error('There was a problem with the jQuery request:', error);
  });

读取json文件肯定会报跨域错误

index.html:1 
        
        
    Failed to load resource: net::ERR_FILE_NOT_FOUND
index.html:1  Access to script at 'file:///C:/Users/aidou/Desktop/seedata/dist/assets/index-6e5f028a.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.

jsonp解决CORS问题

首先jsonp多了一个回调函数的东西，所以浏览器发出方需要定义一个回调函数，并且**.json文件中也必须声明一个同名的回调函数**

先在script定义回调函数

<script>
        let data=0
        function jsoncallback(res){
            console.log(res)
            data=res
        }
</script>

这里的data只是用于赋值便于后续使用

创建json文件，如果是服务端返回，也必须是以下格式

jsoncallback(
{
    "list1":{
        "years":"['2015', '2016', '2017', '2018', '2019', '2020', '2021']",
        "num":"[265382,339564,447650,455227,471133,543603,634478]"
    }
    }
)

回调函数名可以自定义，但必须保证script中的回调函数名与json文件的回调函数名一样，如文中都为：jsoncallback，

在script中引入.json文件

<script>
        let data=0
        function jsoncallback(res){
            console.log(res)
            data=res
        } </script>
        <script src="json/index.json"></script>
        <script>
            console.log(data)
            console.log('list1',data['list1'])
        </script>

结果：

在引入.json文件后的script中都能使用data