请求的资源上不存在 'Access-Control-Allow-Origin' 标头 - VueJS

Question

我正在开发一个vuejs应用程序，该应用程序可以调用外部API。当我这样做时：

this.$http.get(myAPIurl)
                .then(response => {
                    return response.json();
                })
                .then(data => {
                    console.log(data);
                }); 

我在Chrome Console中获得了这两个错误。

Refused to set unsafe header "Access-Control-Request-Method"
XMLHttpRequest cannot load http://xxxxxx Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access

我该如何处理？

Answer 1

如果您正在对与页面打开的XMLHTTPREQUEST进行XMLHTTPREQUEST，则您的浏览器会阻止它，因为出于安全原因，它通常允许使用相同的请求。当您想执行跨域请求时，您需要做一些不同的事情。关于如何实现这一目标的教程，使用cors 。

当您使用Postman时，它们不受此政策的限制。引用 cross-origin xmlhttprequest ：

常规网页可以使用xmlhttprequest对象从远程服务器发送和接收数据，但它们受相同的原始策略的限制。扩展不受限制。只要它首先请求交叉原始权限，扩展程序就可以与远程服务器交谈。

。

要解决此问题，您的外部API服务器必须通过设置以下标题来支持CORS请求：

header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

编辑

您可以使用格式为 jsonp，就像在此codepen中完成一样。这是关于如何将jsonp与Vue-Resource一起使用的讨论，请参阅此链接中的示例代码：

this.$http.jsonp('https://api.instagram.com/v1/tags/' + this.hash + '/media/recent', {
    client_id: 'xxxxxxxxxxxxxxxxxxxxxxxx'
}, function(data){
    this.pictures = _map(data.data, this.transFormInstagramModelToLocalModel);
}, {
    'jsonp': 'callback'
});

您可以在这里找到讨论也有帮助。