jquery读取json文件跨域_跨域请求json文件遇到的诸多问题

问题最终成功解决。如果你是急性子，只想知道成功的方法，那就拉到文章末尾去吧！(#.#)

这几天在写一个页面，采用的vue。数据存在一个本地json文件里。

刚开始使用的vue-resource.js来异步请求json文件，那么就牵扯到了跨域问题。在前端使用了node服务器来代理。so easy对不对？

但问题是只有一个页面，而且东西不是很多，希望把css、hml、js直接放在一起，直接点击html就可以直接访问。直白一点就是不希望前端用什么服务器去代理实现跨域。

因为json存在本地，又不想跨域，所以把数据直接复制到vue实例化对象的data里。OK，这样当然就不用考虑跨域了。但是实际开发中有几个会这样去做？数据再不多也有一百来行好吗？可不是一个两个字段哦！

而且，需求也变了。json文件需要远程获取。

怎么办？

一、使用ajax请求资源。

前提条件，json是一个数组。

get方法？

$.get(url).done(function(res){

console.log(res)

})

呵呵，报错了·！

XMLHttpRequest cannot load

url. No 'Access-Control-Allow-Origin' header is present on the requested

resource. Origin 'null' is therefore not allowed access.

什么意思？意思就是get方法此种情况下请求不到资源。牵涉到了跨域。需要后台修改请求头滴！(如何修改可以百度)。但是呢，现在要求不在后台进行任何改动！只在前端进行处理！

使用ajax跨域要用jsonp。这是常识哦。

使用jsonp如下：

$.ajax({

url:url,

type:"GET",

dataType:"JSONP",

success:function(res){

console.log(res)

},

error:function(res) {

console.log(res)

}

})