vue-resource 怎么解决跨域问题

Question

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

Answer 1

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

Answer 2

試試

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

或是

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

Answer 3

你请求的数据是什么东西？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. 如果希望使用其它请求，譬如：post，put，delete。。。，那还是需要后端做各种header设置的

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

Answer 4

webpack dev server可以配置