跨域请求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)
        }
})
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了。
一大心头疑惑去除,爽啊!
好兆头哦!

推荐阅读更多精彩内容