Vue写demo，测试跨域请求出错，'Access-Control-Allow-Origin'

Question

想利用vue+v2ex的开放api来写demo，在测试跨域请求json数据时遇到问题，用gulp的本地服务器来进行测试，本地请求json文件没有问题，但是V2EX的就不行了，报下面的错误

用的是CORS，对前端跨域的实现不是特别清楚，看书上的例子是说写绝对路径就可以

var xhr = new XMLHttpRequest();
        xhr.open("get", "https://www.v2ex.com/api/topics/hot.json", false);
        xhr.send(null);
        
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            alert(xhr.responseText);
            var div = document.createElement('div');
            div.innerHTML = xhr.responseText;
            document.body.appendChild(div);
            alert(allHeaders);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }

求解决方案，谢谢了。还有就是gulp搭建的本地服务器或是vue的本地服务器，有没有办法设置Access-Control-Allow-Origin

Answer 1

单纯本地自己做 Demo 用可以用这个 Allow-Control-Allow-Origin: * 扩展，它会帮你解决跨域问题。

Answer 2

我记得Chrome有个加跨域头的插件

Answer 3

前段时间写某个东西的时候确实是遇到过类似题主所说的情况。

gulp开的8080端口请求别的端口上的后台接口的时候就会有跨域的问题

至于楼主所要求的前端跨域实现的话，建议用JSONP。

Answer 4

以我的认识，前端没有任何的方法可以将这个json里的内容获取到，需要借助于后台的帮助，比如node，写ajax请求自己写的node代码，在node中去请求这个网站提供的API利用这种方案来解决吧，关于跨域可看看这个。

同时欢迎来到韩庄乡男子电力职业技术学院交流前端学习！

Answer 5

可以在webpack配置时配置下代理属性

Answer 6

1单纯get请求可以尝试jsonp
2别人的服务器你是决定不了跨域限制的，所以可以自己搭建一个中转服务器，node来做这件事很适合