Question

每当我尝试在React中使用'fetch'方法从我的REST API中获取数据时，都会收到'已被CORS策略阻止：无'Access-Control-Allow-Origin'错误。我已经完成研究，发现可以使用标题解决此问题吗？事情是我刚起步并开始使用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>
        );
    }
  }
}

Answer 1

这不是React Issue。您必须在后端解决它。

Answer 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())

什么是标题，以及如何从REST API获取数据？

2 个答案: