什么是标头以及如何从 REST API 获取数据？答案

【问题标题】：What are Headers and how to fetch data from REST API?什么是标头以及如何从 REST API 获取数据？
【发布时间】：2019-09-05 15:08:22
【问题描述】：

每当我尝试使用 React 中的“获取”方法从我的 REST API 获取数据时，我都会收到“已被 CORS 策略阻止：没有“访问控制允许来源”错误。我做了研究，发现它可以用标题解决？问题是我是新来的反应和使用 API，所以我不太确定它们是什么。带有标题的 componendeDidMiunt 可能是什么样的？

   constructor(props) {
    super(props)
    this.state = {
      items: [],
      isLoaded: false
    }
  } 
  componentDidMount() {

    fetch('http://localhost:8080/seniorproject/getUserCourses/1')
      .then(res => res.json())
      .then(json => {
          this.setState({
            isLoaded: true,
            items: json
          })
      });
  }

  render() {
    var {items, isLoaded } = this.state;

    if(!isLoaded) {
      return (
        <div>
          ...Loading
        </div>
      )
    } else {
        return (
          <div className="App">
          Data has been loaded..
          </div>
        );
    }
  }
}

【问题讨论】：

欢迎来到 Stack Overflow thechans7！是的，你是对的，CORS 可以用标头修复，但是从客户端到标头，你无能为力来解决问题。您需要在服务器的响应中包含 CORS 标头。
CORS 可能很难理解。我发现以下内容很有帮助：developer.mozilla.org/en-US/docs/Web/HTTP/CORS

标签： reactjs rest api fetch

【解决方案1】：

这不是 React 问题。你必须在后端解决它。

【讨论】：

【解决方案2】：

只需在服务器代码中添加标头即可。我假设它在 nodejs 中......


    // Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Pass to next layer of middleware
    next();
});

另一种更简单的方法是安装cors包npm install cors 这为您提供了更大的灵活性。

假设您在公共文件夹public/data.js 中有一个文件。您所要做的就是将 cors 添加到路线中。

const cors = require('cors');
app.get('/data.json', cors())

【讨论】：