angularjs - 在预检错误中获取 Access-Control-Allow-Headers

Question

我创建了 Angular js 应用程序，其中集成了 twitch api ，该 api 是

 return $http({
        url: "https://api.twitch.tv/kraken/streams",
        method: "GET",
        params: { channel: channel, limit: 1 },
        headers: { "Client-Id": "XXXXXXXXXXXXXXX" }
    })

问题是，当我重新加载页面时，API 正在工作，但是当我的状态发生变化而没有页面重新加载时，我会从此 api 收到跨源错误。错误是

Failed to load https://api.twitch.tv/kraken/streams?channel=eliazOne&limit=1: Request header field RefreshToken is not allowed by Access-Control-Allow-Headers in preflight response.

任何人都知道如何解决交叉错误

Answer 1

当您向不同的域发出请求时，这称为跨域请求。也称为 CORS 请求。

当您将数据发布/放置到不同的域时，它将首先发出 OPTIONS 请求。这是为了确保服务器在响应中包含 Access-Control-Allow-Headers。这些 header 应允许访问您发出请求的域。如果这些 header 不存在，那么当发出 OPTIONS 请求时，它将失败，并且永远不会发出 POST/PUT。

请参阅此处了解更多信息 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests

简单的答案是将这些 header 添加到您的服务器。