首页 > vue-resource 怎么解决跨域问题

vue-resource 怎么解决跨域问题

使用vue-resource 然后就是报出跨域错误,因为一次接触这类框架也不知道该怎么解决跨域 可以详细的讲解一下嘛


試試

Vue.http.options.xhr = { withCredentials: true }

或是

this.$http.jsonp('...', { credentials: true })

webpack dev server可以配置



昨天也遇见这个问题,在build/webpack.dev.conf.js这个文件里面添加对应的http代理,具体的用法查看对应的地址
这里使用的是vue-cli创建的,如果不是,可以搜索http代理相关的资料


你请求的数据是什么东西?json,还是html

看你用了jsonp,理论上如果后端返回数据是正确包裹的json格式,是没问题的。

那么什么是“正确包裹的json”?大致上你得先了解jsonp是个怎样解决get请求跨域问题的,请看下图:

原来是通过加了一个script标签在html里来拿数据的,知道script标签怎么玩的么?如果不指定类型,她默认就是加载一段javascript代码。OK,问题来了,既然她只能加载javascript代码,那又是如果获取json格式数据的?

这就是我说的,需要"正确包裹"了,看下面例子:

parseResponse({"Name": "Foo", "Id": 1234, "Rank": 7});

这就是一段javascript代码,调用全局的parseResponse方法,并传入了一段json数据{"Name": "Foo", "Id": 1234, "Rank": 7}作为参数。

想到怎么拿这段数据了么?只要你自己写一个全局的parseResponse方法,如下:

window.parseResponse = function(data){
    //做你想做的事情吧
};

就这样,一个通过jsonp发送的请求,数据就被拿到了。

这里涉及几个问题:

  1. jsonp是需要后端特殊处理的,返回结果必须"正确包裹"

  2. 使用jsonp就不需要后端再设置乱七八糟的header了,但局限是只能用做get请求

  3. 如果希望使用其它请求,譬如:postputdelete。。。,那还是需要后端做各种header设置的

关于跨域是什么,强烈建议先看构建public APIs与CORS

【热门文章】
【热门文章】