React/Axios API 获取请求问题（CORS 和内部服务器错误 500）

Posted 2023-02-22

【中文标题】React/Axios API 获取请求问题（CORS 和内部服务器错误 500）

【英文标题】：React/Axios API Get Request Issues (CORS & Internal Server Error 500)

【发布时间】：2021-02-25 01:37:27

【问题描述】：

我正在尝试完成对 API 的 axios GET 请求，但遇到了Internal Server Error - 500，我很好奇这是否只是我的代码和/或我的尝试在打这个电话或别的什么。尽管 CORS 问题似乎已经过去了，但我还是会从头开始，以防它与我当前的问题有关。

我对请求的最初尝试给了我以下 CORS 错误：

...from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight
request doesn't pass access control check: It does not have HTTP ok status.

在对此进行了大量研究后，我发现我可以将https://cors-anywhere.herokuapp.com 附加到我的目标 API URL 并解决此问题。到目前为止，一切都很好，但现在我在浏览器中本地获取以下内容：net::ERR_NAME_NOT_RESOLVED

所以我决定跳到 Postman 并输入给定的标头以访问此 API 以查看是否可以找到更多信息，并且我在 Postman 上得到以下信息：

    "timestamp": "2020-11-13T01:04:47.288+0000",
    "message": "General error occurred please contact support for more details",
    "error": "Internal Server Error",
    "status": 500

现在，在此 API 的文档中，它指出 500 是他们的服务器错误，但我对此没有信心，因为我认为这可能只是我自己在这里做的。所以我基本上有两个问题......

API 的开发人员是否应该做/更改任何事情以避免 CORS 问题，或者这是经常遇到的事情？ 500 错误响应是针对我还是他们？

下面是我在我的 React 应用程序的 App.js 文件中的 axios 请求。如果需要任何其他代码或信息，请告诉我。非常感谢您的帮助！

import React,  Component  from 'react';
import './App.css';
import axios from 'axios';

class App extends Component 
  state = 
    events: []
  

  constructor() 
    super();
    const proxyURL = 'https://cors-anywhere.herokuapp.com'
    const URL = 'https://api.example.com/api/'
    const proxiedURL = proxyURL + URL

    axios.get(proxiedURL, 
      headers: 
        'Accept': 'application/json',
        'Authorization': 'Bearer ' + process.env.REACT_APP_AUTH_API_KEY
      
    )
    .then((res) => 
      console.log(res.data)
    )
    .catch((error) => 
      console.log(error)
    )
  

  render() 
    return (
      <div className="App">
        <header className="App-header">
          <h1>Data</h1>
        </header>
      </div>
    );
  


export default App;

【参考方案1】：

根据 cors-anywhere 的文档：

此 API 允许跨域请求到任何地方。

用法：

/ 显示帮助 /iscorsneeded 这是唯一的资源 在没有 CORS 标头的主机上。 / 创建对 的请求，并在响应中包含 CORS 标头。

您的代码在 https://cors-anywhere.herokuapp.com 之后缺少一个斜杠以工作，即：https://cors-anywhere.herokuapp.com/。

回答你的另外两个问题：

CORS 问题非常普遍，API 的开发人员可以设置可以从哪个域调用 API。 More on MSDN 500 响应意味着这是内部服务器错误，因此在服务器端。虽然这可能是因为很多原因，比如查询错误的 URL，传递意外的数据......理想情况下，所有这些都应该被覆盖，并且每次都会返回不同的错误，但这种情况很少发生。 :)

【讨论】：

感谢您的帮助！斜线显然是我的遗漏，但在今天早上重新测试所有内容后，即使没有斜线，我也得到了不同的响应并最终获取了数据，所以谢谢！