使用 fetch 功能接收我的反应应用程序时收到 CORS 错误 [重复]

Question

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

我什至能想到的下一件事是重构我的 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 问题：

选项 #1（推荐）

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

示例：

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

在这种环境下，从 UI 组件向http://localhost:8080/rest/api 发出的任何获取请求都将因 CORS 问题而被阻止。

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

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

http://localhost:8080上运行的服务器必须配置header选项

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

这将允许 http://localhost:3000 服务的 UI 组件对 http://localhost:8080 进行 fetch 调用

---

选项 #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