Ajax跨域请求本地json出现跨域的问题

为什么会出现跨域的问题？
因为浏览器本身存在同源政策，即协议，域名，端口相同，视为同一个域（源）
举例来说，http://www.wayen.top/index.html 这个网址，
协议是http://
域名是www.wayen.top
端口是80（默认端口可以省略）。

http://www.wayen.top/text.html：同源
https://www.wayen.top/text.html：不同源（协议不同）
http://wayen.top/text.html：不同源（域名不同）
http://wayen.top:81/text.html：不同源（端口不同）

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

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

谷歌浏览器出现跨域问题，会报错，数据不会在控制台打印出来

然后我试了火狐浏览器，虽然也有警告提示，但是我的json数据是能被获取的

火狐为了方便是允许跨域的(虽然这样很不安全)

现在的问题就很明显了，谷歌浏览器不允许跨域访问，我找到几个解决的办法

1、JSONP进行跨域。
2、项目中使用nginx反向代理。
3、修改谷歌浏览器的配置。

第二种和第三种就不说了，现在讲讲第一种
使用JSONP方法跨域

它的基本思想是，网页通过添加一个《script》元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
首先，网页动态插入《script》元素，由它向跨源网址发出请求

客户端方法：

<div id="textContent"></div>
 <script type="text/javascript">
	function callbackFunction(result, methodName){
		var  html = ''
            	for(var i = 0; i < result.length; i++){
               	 html += '<p>' + result[i] + '</p>';
            	}
           	 document.getElementById('textContent').innerHTML = html;
        }
</script>
<script type="text/javascript" src="http://www.wayen.top/ajax/jsonp.php?jsoncallback=callbackFunction"></script>

jQuery 方法：

<div id="textContent"></div>
 <script type="text/javascript">
	$.getJSON("http://www.wayen.top/ajax/jsonp.php?jsoncallback=?", function(data) {
		var  html = ''
		for(var i = 0; i < data.length; i++){
		   html += '<p>' + data[i] + '</p>';
		}
		$('#divCustomers').append(html); 
	});
</script>

以上需要配合后端完成，服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

了解更多关注公众号，谢谢