ReactJS API 数据获取 CORS 错误

IT技术 javascript reactjs cors
2021-03-27 17:18:06

几天来,我一直在尝试为我的实习创建一个 React Web 应用程序,但我遇到了 CORS 错误。我正在使用最新版本的 reactJS,并将其放在 中create-react-app,下面是获取代码:

componentDidMount() {
  fetch('--------------------------------------------',{
    method: "GET",
    headers: {
      "access-control-allow-origin" : "*",
      "Content-type": "application/json; charset=UTF-8"
    }})
  .then(results => results.json())
  .then(info => {
    const results = info.data.map(x => {
      return {
        id: x.id,
        slug: x.slug,
        name: x.name,
        address_1: x.address_1,
        address_2: x.address_2,
        city: x.city,
        state: x.state,
        postal_code: x.postal_code,
        country_code: x.country_code,
        phone_number: x.phone_number,
      }
    })
    this.setState({warehouses: results, lastPage: info.last_page});
  })
  .then(console.log(this.state.warehouses))
 }

很抱歉,由于公司规则,我无法发布 API 的 url,但是,已确认 API 后端中没有 CORS 设置。

但是,我在 mozilla 上运行时遇到以下错误

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ------------------. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ---------------------------------------------. (Reason: CORS request did not succeed).

如果在 chrome 上运行它会出现以下错误

Failed to load resource: the server responded with a status of 405 (Method Not Allowed)

Failed to load --------------------------------------------------------: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Uncaught (in promise) TypeError: Failed to fetch

另一件事是我能够在浏览器中打开 url,没有任何问题或任何问题。

请帮助和感谢!

附加信息

我添加 CORS 设置的原因是它给出了 CORS 错误,因此删除它并不能真正解决问题。

接下来我尝试执行代理设置,但是,它现在给出

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0

根据互联网,这是因为响应不是 JSON。但是,当我检查 API 时,它给出了这个

api img

这意味着返回类型应该是 JSON 对吗?

附加信息

检查响应将产生这个

{"status":200,"total":1,"per_page":3,"current_page":1,"last_page":1,"next_page_url":null,"prev_page_url":null,"from":1," to":3,"data":[{"id":1,"slug":"america","name":"america","address_1":"USA Court","address_2":"USA", "city":"USA","state":"USA","postal_code":"94545","country_code":"US","phone_number":"10000001","created_by":null,"updated_by": null,"created_at":"2017-11-10 11:30:50+00","updated_at":"2018-06-28 07:27:55+00"}]}

1个回答

需要在 API 中设置 CORS 设置以允许从您的 React 应用程序域进行访问。没有 CORS 设置,没有来自不同域的 AJAX就这么简单。您可以将 CORS 设置添加到您的公司 API(这不太可能发生),或者您可以像下面描述的那样解决:

CORS 只是一种客户端浏览器保护用户免受恶意 AJAX 攻击的机制。因此,解决此问题的一种方法是将来自 React 应用程序的 AJAX 请求代理到其自己的 Web 服务器。正如文森特所建议的,create-react-app提供了一种简单的方法来做到这一点:在您的package.json文件中,只需 .chuck "proxy": "http://your-company-api-domain"有关更多详细信息,请参阅此链接

然后在你的应用程序的react,你可以使用相对URL是这样的:fetch('/api/endpoints')请注意,相对 URL 必须与您公司的 API 匹配。这将向您的服务器发送请求,然后服务器将请求转发到您公司的 API 并将响应返回给您的应用程序。由于请求是以服务器到服务器的方式处理的,而不是浏览器到服务器的,因此不会发生 CORS 检查。因此,您可以删除请求中所有不必要的 CORS 标头。

抱歉打扰,但可能是代理服务器以404.
2021-05-27 17:18:06
您好,我添加了代理设置并且 CORS 错误确实消失了,但是出现了一个新错误“未处理的拒绝(语法错误):意外的令牌 < JSON 中的位置 0”
2021-05-29 17:18:06
如果代理服务器以 404 响应会发生什么?
2021-06-08 17:18:06
@Last 这意味着您绕过 CORS。但响应不是有效的 JSON。请注意,响应的第一个字符是“<”,因此它很可能是 XML 格式。您能否检查您的回复并将其发布在您的问题中?
2021-06-10 17:18:06
发布回复
2021-06-16 17:18:06