Axios获取请求，但标头不工作

Question

我试图用Axios向一个需要API密钥作为头的API发出get请求，但我不确定我做错了什么。控制台中有两个错误。1:xhr。js:178个选项https://api.propublica.org/congress/v1403（禁止）。2:加载失败https://api.propublica.org/congress/v1:对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“access control Allow Origin”标头。起源'http://localhost:3000因此不允许访问。响应的HTTP状态代码为403。我在用React谢谢你的关注

const API_KEY = "*******";
class List extends Component {
  state = {
    legislators: []
  }

  componentDidMount() {
    axios
      .get("https://api.propublica.org/congress/v1", {
        headers: { 'Authorization': API_KEY }
      })
      .then(data => console.log(data));
  }

Answer 1

这很可能是CORS的问题。

跨原点资源共享（CORS）是一种机制，它使用额外的HTTP标头，让用户代理获得访问来自不同原点（域）服务器的选定资源的权限，而不是当前使用的站点。

你可以在这里阅读更多关于CORS的信息。

要绕过CORS，您可以在任何地方使用CORS。这里提供了留档

标头应该以X-API-Key：PROPUBLICA_API_KEY的格式提供，而不是授权：API_KEY（参考文档）