我的知乎

今天在web中调用api接口,get请求的时候,浏览器报错 :)
v2-8bc3326e0938bc425ea111e2d4be21b9_b.png
这个和安全机制有关,默认不允许跨域调用,这就是使用Ajax就会不可避免的两个问题:

1、Ajax以何种格式来交换数据。
2、跨域的需求如何解决

这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决。

那么这里跟大家介绍的方案是用json来传送数据,靠jsonp来跨域

JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿谍战片来打个比方,JSON是地下党们用来书写和交换情报的“暗号”,而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没?一个是描述信息的格式,一个是信息传递双方约定的方法。

处理手段:使用jsonp格式, ajax请求参数dataType:'JSONP'。

$.ajax({
        url: "http://.......",
        type: 'GET',
        dataType: 'JSONP',//here
        success: function (data) {
        }
    });

如果想了解json和jsonp,可以看看这位博主的文章,或许能让你豁然开朗
说说json和jsonp

分割线-------------------------------------------------------------------------------------------------------------

同样的在VueResouce请求中,也可以通过jsonp解决跨域问题;

如果我们用VueResouce直接请求,可以这样写(我们以豆瓣api为例):

this.$http.get('https://api.douban.com//v2/movie/top250').then((response) => {
        this.movie = response.data;
        console.log(this.movie); 
});

这样的话会报错;

因为这是一个跨域的请求,不能直接这样去访问后台,获取数据,所以在这里可以使用jsonp解决,我们可以把代码改写成:

this.$http.jsonp('https://api.douban.com//v2/movie/top250', {},
   { 
      headers: {},
      emulateJSON: true }).then((response) => {
        this.movie = response.data;
        console.log(this.movie);
      });

这样的话就能够正常返回数据了。