Axios 获取请求 WITH/ Header 不工作

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”标头。因此，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 here 上阅读更多信息。

要绕过 CORS，您可以使用 CORS-anywhere。提供的文档here

标题应以X-API-Key: PROPUBLICA_API_KEY 格式而不是'Authorization': API_KEY 格式提供（参考docs）