问题最终成功解决。如果你是急性子，只想知道成功的方法，那就拉到文章末尾去吧！(#.#)
这几天在写一个页面，采用的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)
}
})
1516769929(1).png
让我们一起看一下网络请求：请求发送成功，数据返回！
等等，为什么数据返回了但是程序进入了error里而无法进入success？
点开console面板的内容，你会在好几个地方找到如下内容：
TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context. at Function.remoteFunction
再具体查看，就是jquery随机生成的callback函数没有执行。类似于
Error: jQuery19145265967122703629_1498552272261 was not called
来捕捉一下错误。
error:function(res,StatusText){
console.log(StatusText)
}
结果是：parsererror。
什么意思呢？意思就是解析器错误.
有人说既然解析器错误，那就把获取的数据处理一下。抱歉，虽然数据返回了但此时是获取不到滴！网上可以百度到的前端方法都试过了，然并卵！
此时记起一般情况下json数据格式都是对象，于是要求把json文件内容转为如下格式：{“data”:[]}。
很快呢，数据格式修改了，还是上边的代码，还是数据请求并返回成功，还是parsererror，只不过具体错误变了，现在的报错是：
Uncaught SyntaxError: Unexpected token :
点开一看，数据格式有误，"data"变成了'"data'"，显然是有问题的。而返回的数据“data”还是“data”。把点开后看到的数据复制出来贴在任何地方，那些个单引号又没有了，在线检测该数据时也没有单引号格式没问题。这是什么鬼？莫名其妙哪里多出来的单引号？
现在跨域也解决了！数据也返回了！返回的数据也是想要的！可是就是解析有误！功败垂成啊有木有？！！！
从网上找到了一段json数据放进json文件，这次key没有了多余的单引号，但是仍然提示Uncaught SyntaxError: Unexpected token :
百度吧！找到了这么一条：
https://segmentfault.com/q/1010000000498461
采用了一下，把json文件后缀名改为jsonp，结果还是提示Uncaught SyntaxError: Unexpected token :
还百度到了这么一条：
https://www.cnblogs.com/amylis_chen/p/4190769.html
大意是jquery从1.4版本开始解析json时要求更严格了。一直用的<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>，那就换成低版本吧，用<script src="https://cdn.bootcss.com/jquery/1.3.1/jquery.js"></script>。
but，依旧报错，还是Uncaught SyntaxError: Unexpected token :
崩溃！！！！！！
难道真是是生成json文件时包裹data的双引号有问题？可检测提示没问题！那就重新生成吧。这次没了单引号，不过，仍然提示Uncaught SyntaxError: Unexpected token :
既然jsonp跨域走不通，解决不了Uncaught SyntaxError: Unexpected token :这个问题，那就换种方式吧！
二、配置chrome浏览器使其允许跨域操作
方法在这里：https://www.cnblogs.com/lyingSmall/p/5198624.html
不过呢，提示
Failed to load resource: the server responded with a status of 403 (Forbidden)
XMLHttpRequest cannot load url. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403.
呵呵，请求不允许，宣告此方法失败。
三、还是用nodejs吧，远程获取json文件
this.$http.get(url)
.then(function(res){
this.passing=res.data.passing;
this.failing=res.data.failing;
})
this.$http.jsonp(url)
.then(function(res){
this.passing=res.data.passing;
this.failing=res.data.failing;
})
都是XMLHttpRequest cannot load url. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
人家不让啊！
既然跟请求头相关，那就想办法自定义一下请求头，百度到了这么一条：
https://segmentfault.com/q/1010000008423605
还是用jsonp，按照提示配置，结果：
XMLHttpRequest cannot load url. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
再来：
this.$http.jsonp(url,{credentials: true})
.then(function(res){
this.passing=res.data.passing;
this.failing=res.data.failing;
})
报错依旧同上！
OMG！！！！
那就尝试修改node代理文件吧：
在创建的服务器里添加如下代码：
response.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
response.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
报错依旧：
XMLHttpRequest cannot load url. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
又百度了这么一条：
http://cnodejs.org/topic/51dccb43d44cbfa3042752c8
查看了该文章和与之相关的所有文章，并进行尝试，还是宣告失败。
四、cors
需要让后台配白名单。
又是后台！问题是不能对后台做任何更改，只能前端。
。。。。
目前为止，所有的尝试均宣告失败！
求解！
万分感谢！
咳咳！
今天是2018年2月1号。我又回来编辑这篇文章了。
上面的跨域问题在前段时间一直困惑着我，一直没有突破。
今天回过头来又试了一次ajax方法：
getViewData:function(){
var me=this;
$.ajax({
url:url,
type:"GET",
success:function(res){
console.log(res)
/ /console.log(JSON.parse(res).data)
me.ViewData=JSON.parse(res).data;
// console.log(me.ViewData)
}
})
},
上文有讲到，之前这种方法是不允许跨域访问请求的url的；但是今天试了一下，在success函数里先输出console.log(res)竟然成功输出了，也就是跨域成功并返回数据了。没有进入error什么的。
然后就去获取数据，开始是me.ViewData=res.data，但是会输出undefined。为什么呢？因为请求的是json文件，正常情况下返回的是字符串类型的数据，所以需要处理一下，me.ViewData=JSON.parse(res).data就OK了。
一大心头疑惑去除，爽啊！
好兆头哦！
网友评论