Fetch 请求 500 错误；请求的资源上不存在 'Access-Control-Allow-Origin' header

Question

我正在使用 create-react-app 构建一个 front-end 网络应用程序并调用 ProPublica API。提取调用如下：

export const fetchSenators = () => dispatch => {
fetch('https://api.propublica.org/congress/v1/115/senate/members.json', {
    method: 'GET',
    headers: {
      'X-API-Key': process.env.REACT_APP_PROPUBLICA_API_KEY,
      'Access-Control-Request-Headers': '*'
    }
  }).then(response => response.json())
  .then(data => dispatch({ type: FETCH_SENATORS, payload: data.results[0].members }));    
}

我收到此错误：

“请求的资源上不存在 'Access-Control-Allow-Origin' header。因此不允许访问来源 'https://anaxagoras.herokuapp.com'。响应的 HTTP 状态代码为 500。如果响应不透明满足您的需求，将请求的模式设置为 'no-cors' 以在禁用 CORS 的情况下获取资源。 :1 未捕获（承诺）类型错误：获取失败

我确实需要响应数据，所以我不能使用{mode: 'no-cors'}。我是否需要包含其他 header 以允许此请求不 return 500 错误？

我大体上理解这里发生的事情以及为什么存在安全问题，但如果您能简单解释为什么会发生这种情况（并希望如何解决），我将不胜感激。谢谢！

Answer 1

我注册了 ProPublica API 密钥，并使用以下代码成功实现了 GET 提取请求：

let fetchSenators = () => {
 fetch('https://api.propublica.org/congress/v1/115/senate/members.json', {
  mode: 'cors',
  headers: {
  'X-API-Key': 'Q82EAnyHuygomXxK2mNDfcHkvOQ17EmsBPvOc1eq'
  }
}).then(response => response.json()) 
  .then(response => {
    renderResults(response.results[0].members)
})}

你可以看到它在这里工作：

https://codepen.io/BenSmith/pen/xPVyqp

请注意，我已经删除了您代码的调度方面。

注意事项：

进行跨域调用时，您希望在提取选项中指定 CORS 模式。
您不需要使用 'Access-Control-Request-Headers' header，因为设置 CORS 模式看起来会处理这方面的请求。
在您的代码中，您应该使用 FETCH_SENATORS_SUCCESS 以便操作明确，即 FETCH_SENATORS 暗示该操作正在获取参议员数据，而在这种情况下它不是，它在请求成功。

Fetch 请求 500 错误；请求的资源上不存在 'Access-Control-Allow-Origin' header

500 error for Fetch request; No 'Access-Control-Allow-Origin' header is present on the requested resource

api

fetch

cors

reactjs

redux