使用 fetch 函数访问我的 React 应用程序时收到 CORS 错误

Question

连接 API 时，我收到了可怕的 CORS 错误。我正在使用 BeerDB 之一。我尝试了该插件，添加标题，进入index.js但似乎没有解决它。仍在研究它，我的代码App.js如下。这是一个反应应用程序。

我什至可以想到的下一件事是重构我的 API 获取调用以使用axios和使用与当前使用的语法不同的语法。

import React, {useEffect, useState, Component} from 'react';
import './App.css';
import Beer from './Beer.js';

const App = () => {

  const App_Key = "b1322de05886eaf6bdd71b64c52d12b7"

  const [beers, setBeers] = useState([]);

  useEffect (() => {
    getBeers();
   }, []);

  const getBeers = async () => {
    const response = await fetch("http://api.brewerydb.com/v2/?key=b1322de05886eaf6bdd71b64c52d12b7");
    const data = await response.json();
    console.log(data); 
  }

  return(
    <div className="App">  
      <form>
        <input type="text" ></input>
        <button type="submit">Search</button>
      </form>

    { beers.map(beers => (<Beer /> )) }

    </div>
  );
}

export default App;

Answer 1

CORS错误是由于目标服务器不允许浏览器发出请求造成的。通常允许浏览器向下载网页及其包含的脚本的同一服务器发出请求。

大多数情况下，CORS 错误是浏览器引发的真正错误。它的目的是防止意外或故意尝试将数据从一个网页导出到对手的服务器。

但在其他时候，CORS 错误会阻碍从网页查询受信任的第 3 方服务器的 API 的真实需求。

解决CORS问题有2种方法：

选项#1（推荐）

更新目标服务器的 API 以明确允许来自源的 AJAX 请求。

例子：

假设 UI 由http://localhost:3000提供服务，API 托管在http://localhost:8080/rst/api上

在此环境中，由于 CORS 问题，从 UI 组件向http://localhost:8080/rest/api发出的任何获取请求都将被阻止。

这是真正要求允许http://localhost:3000的来源向http://localhost:8080发出请求的情况。

为了允许从http://localhost:3000获取到http://localhost:8080，

在http://localhost:8080上运行的服务器必须配置以下标头选项

{'Access-Control-Allow-Origin': 'http://localhost:3000'}

然后，这将允许http://localhost:3000提供服务的 UI 组件对http://localhost:8080进行提取调用

选项 #2使用no-cors模式 进行 fetch 调用

注意：不建议在生产中使用此方法。这仅可用于测试目的

通过禁用默认的 cors 检查，可以像来自 POSTMAN 工具或 url 命令的请求一样进行 fetch 调用。但生产环境不建议使用此方法。这必须仅用于测试。

以下是禁用 cors 检查的 fetch 调用示例：

  fetch(url, {
    method: 'POST', 
    mode: 'no-cors',
    headers: {
      'Content-Type': 'application/json'
    },
    body: {"key" : "some text"}
  })

更多信息：

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch