使用提取功能到我的React App时收到CORS错误 [英] Receiving a CORS error when to my react app using fetch function

问题描述

连接API时，我收到了可怕的CORS错误.我正在使用BeerDB之一.我尝试了插件，添加了标头，并进入了 index.js ，但似乎无法解决.仍在研究中，我的 App.js 代码如下.这是一个React应用.

I received the dreaded CORS error when hooking up my API. I am using the BeerDB one. I tried the plugin, adding the header, going into index.js but it does not seem to solve it. Still looking into it, my code for my App.js is below. It is a React app.

我什至想到的下一件事是重构我的API提取调用以使用 axios 并使用与当前使用的语法不同的语法.

The next thing I can even think of is to refactor my API fetch call to use axios and use different syntax than currently being used.

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;

推荐答案

CORS错误是由于目标服务器不允许浏览器发出请求而引起的.通常允许浏览器向下载该网页和其中包含的脚本的服务器发出请求.

The CORS error is due to the destination server not allowing the browser to make a request. The browser is usually allowed to make a request to the same server from which the web page and the script included by it were downloaded.

大多数情况下，CORS错误是浏览器抛出的真正错误.这样做的目的是防止意外或故意将数据从一个网页导出到敌方服务器的企图.

Most often, the CORS error is a genuine error thrown by browser. It is aimed at preventing accidental or deliberate attempts to export data from one web page to an adversary's server.

但是在其他情况下，CORS错误阻止了从网页查询可信的第三方服务器的API的真正要求.

But in the other times, CORS error is a blocker for genuine requirement of querying a trusted 3rd party server's API from a web page.

有两种方法可以解决CORS问题:

选项1(推荐)

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

示例:

假设该UI由 http://localhost:3000 提供，并且该API托管在 http://localhost:8080/rst/api

Suppose that the UI is served by http://localhost:3000 and the API is hosted on http://localhost:8080/rst/api

在这种环境中，从UI组件向 http://localhost:8080/rest/的所有提取请求api 由于CORS问题而被阻止.

In this environment, any fetch request made from the UI components to http://localhost:8080/rest/api will be blocked due to CORS issues.

这是真正要求允许 http://localhost:3000 的来源的情况 http://localhost:8080 .

This is the case of genuine requirement to allow the origin of http://localhost:3000 to make requests to http://localhost:8080.

为了允许从 http://localhost:3000 到

In order to allow fetch from http://localhost:3000 to http://localhost:8080,

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

The server running on http://localhost:8080 must be configured with the header option of

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

然后，这将允许 http://localhost:3000 服务的UI组件对 http://localhost:8080

This will then allow the UI components served by http://localhost:3000 to make fetch calls to http://localhost:8080

选项#2 使用无相关费用模式

注意:不建议将这种方法用于生产.这只能用于测试目的

Note: This method is not recommended for production use. This may be used for testing purpose only

通过禁用默认的cors检查，可以像POSTMAN工具或url命令中的请求一样进行提取调用.但是，不建议在生产环境中使用此方法.这只能用于测试.

The fetch call can be made like a request from POSTMAN tool or url command by disabling the default cors checking. However, this method is not recommended for production environment. This must be used for testing only.

以下是在未启用cors检查的情况下进行调用的示例:

  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

这篇关于使用提取功能到我的React App时收到CORS错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！