Question

我正在使用create-react-app构建一个前端Web应用程序，并调用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'标头。因此，不允许原点'https://anaxagoras.herokuapp.com'访问。响应的HTTP状态代码为500.如果不透明的响应为您服务需要，将请求的模式设置为'no-cors'以获取禁用CORS的资源。：1未捕获（在承诺中）TypeError：无法获取“

我确实需要响应数据，因此我无法使用{mode：'no-cors'}。是否需要包含其他标头以允许此请求不返回500错误？

我通常了解这里发生了什么以及为什么存在安全问题，但是如果你能简单解释为什么会发生这种情况（并希望如何解决），我将非常感激。谢谢！

Answer 1

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

let fetchSenators = () => {
 fetch('https://api.propublica.org/congress/v1/115/senate/members.json', {
  method: 'GET',
  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模式。
您不需要使用“访问控制 - 请求 - 标题”＆＃39;标题设置CORS模式看起来处理请求的这个方面。
在您的代码中，您应该使用FETCH_SENATORS_SUCCESS，以便操作是明确的，即FETCH_SENATORS意味着操作正在获取参议员数据，在这种情况下不是，它会在成功请求后返回结果。

获取请求500错误;请求的资源上不存在“Access-Control-Allow-Origin”标头

1 个答案: