带请求头的Axios Get请求无法正常工作求助

我来帮你拆解并解决这两个问题，先看一下错误背后的原因，再给出具体的修复方案：

错误原因分析 #

1. 403 Forbidden 错误 #

你遇到的第一个403错误主要有两个原因：

• 请求端点无效：https://api.propublica.org/congress/v1只是API的基础路径，不是一个可直接请求的有效端点，你需要指定具体的资源路径，比如某届国会的议院成员列表（比如/118/house/members.json）。
• 请求头格式错误：Propublica API要求Authorization头的格式是Bearer {你的API Key}，而你直接传递了API Key，不符合接口要求。

2. CORS跨域错误 #

浏览器的同源策略会阻止前端直接请求不同域的API，而Propublica的API没有配置允许http://localhost:3000跨域访问的响应头，所以直接在React前端请求会触发这个错误。

具体修复方案 #

方案1：修正API请求的格式与端点 #

先把请求的URL和请求头格式改对，这是解决403的基础：

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

  componentDidMount() {
    axios
      // 替换为具体的有效端点，这里以第118届众议院成员为例
      .get("https://api.propublica.org/congress/v1/118/house/members.json", {
        headers: { 
          // 修正Authorization头的格式为Bearer + API Key
          'Authorization': `Bearer ${API_KEY}` 
        }
      })
      .then(response => {
        console.log(response.data);
        // 把数据存入state
        this.setState({ legislators: response.data.results[0].members });
      })
      .catch(error => {
        console.error("请求失败详情：", error);
      });
  }
}

方案2：解决CORS跨域问题 #

因为Propublica API不支持浏览器端直接跨域请求，所以有两种常用的解决方式：

方式A：使用React开发服务器代理

在你的React项目的package.json里添加一行代理配置：

"proxy": "https://api.propublica.org"

然后修改前端的请求路径为相对路径：

axios.get("/congress/v1/118/house/members.json", {
  headers: { 'Authorization': `Bearer ${API_KEY}` }
})

这样React的开发服务器会帮你转发请求，绕过浏览器的同源策略限制。

方式B：自建后端代理服务

如果是生产环境，更安全的方式是自己写一个简单的后端服务（比如用Node.js/Express），让后端去请求Propublica API，前端再请求自己的后端：

后端示例（Node.js/Express）：

const express = require('express');
const axios = require('axios');
const app = express();
const API_KEY = "你的API Key"; // 这里存放API Key，不要暴露给前端

// 定义一个接口供前端调用
app.get('/api/legislators', async (req, res) => {
  try {
    const response = await axios.get('https://api.propublica.org/congress/v1/118/house/members.json', {
      headers: { 'Authorization': `Bearer ${API_KEY}` }
    });
    res.json(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).json(error.response?.data || { message: "请求出错" });
  }
});

app.listen(5000, () => console.log('后端代理服务运行在http://localhost:5000'));

前端请求修改：

axios.get("http://localhost:5000/api/legislators")
  .then(response => {
    console.log(response.data);
    this.setState({ legislators: response.data.results[0].members });
  })

额外注意事项 #

• 一定要确保你的API Key是有效的，可在Propublica的开发者后台确认状态
• 不要把API Key直接写在前端代码里！生产环境下API Key会被用户看到，存在泄露风险，最好通过后端代理来处理
• 可以查看Propublica的官方文档确认所有可用的API端点和请求规则

内容的提问来源于stack exchange，提问作者Dmitriy