Reactjs 使用react获取数据时出现问题

我在useEffect钩子上获取数据时遇到了一个罕见的问题…它在chrome inspector上给了我“CORS错误”。。。这是我的密码：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

import './HomeScreen.css'
import config from '../config'

// Compomnents 
import Quiz from "../components/Quiz";

const HomeScreen = () => {
    const [data, setData] = useState({ quizzes: [] });
    const [loading, setLoading] = useState('true');
    const [error, setError] = useState(false);

    console.log("TESTING...............................");

    useEffect(() => {
        setLoading('testing');

        const url = "https://mocki.io/v1/4a0ad1a9-352a-45bb-84b9-67e6363d6b7a";  //config.prodLocalhostURLRestAPI + 'quizzes';

        fetch(url)
          .then(res => res.json())
          .then(res => {

            setLoading('result..........')

          })
          .catch(error => {
            //console.log(error);
          });


    }, []);
  
    return (
        <div className="homescreen">
            <h2 className="homescreen__title">Quizzes</h2>

            <div className="homescreen__quizzes">
            <h2>{loading}</h2>
            {loading ? <h2>Loading............</h2> : error ? <h2>ERROR</h2> : data.quizzes.map(quiz => (
                <Quiz />
            ))}
            </div>

        </div>
    )
}

export default HomeScreen;

URL是正确的，可以直接在浏览器上运行

---

有什么问题吗？

首先点击

npm安装cors

，然后

var express = require("express"),
    app     = express(),
    http    = require("http"),
    bodyParser  = require("body-parser"),
    methodOverride = require("method-override"),
    server  = http.createServer(app),
    mongoose    = require("mongoose");
const cors = require('cors');
const port = process.env.OPENSHIFT_NODEJS_PORT || 3011;
app.use(cors()) 
app.set('port', port);
app.set('ipaddr', process.env.OPENSHIFT_NODEJS_IP || "127.0.0.1");
app.use(bodyParser.json());
app.use(methodOverride());

//Import routes
const chatsRoutes = require('./routes/quizzes');
    
app.use('/quizzes/', chatsRoutes);

app.get('/', (req, res) => {
    res.send("Ready!");
});
 
/** catch 404 and forward to error handler */
app.use('*', (req, res) => {
  return res.status(404).json({
    success: false,
    message: 'API endpoint doesnt exist'
  })
});


//app.use('/', routesRaids);

mongoose.connect('mongodb://localhost/quizes', {useNewUrlParser: true, useUnifiedTopology: true }, () =>
    console.log('Connected to Mongo DB')
);


app.listen(port);

---

有那么多关于CORS的帖子-你需要在服务器上修复它。我使用了一个外部服务器，但仍然碰巧。。。该外部服务器是否设置了适当的标头？错误到底是什么？错误是：遗漏Alloworighinheader和我的另一个问题？你认为你的头球打对了吗？显示客户端代码是毫无意义的，相关的是服务器代码。现在，我得到（失败的）net:：ERR\u CONNECTION\u拒绝。当然是服务器started@MarcoMartin请验证您用于从前端调用的URL是否与正在运行的服务器相同我硬编码了URL并拒绝连接。。。从控制台到同一url进行卷曲是完全没有问题的！我得到的确切错误是：Typeerror:无法获取

var express = require("express"),
    app     = express(),
    http    = require("http"),
    bodyParser  = require("body-parser"),
    methodOverride = require("method-override"),
    server  = http.createServer(app),
    mongoose    = require("mongoose");
const cors = require('cors');
const port = process.env.OPENSHIFT_NODEJS_PORT || 3011;
app.use(cors()) 
app.set('port', port);
app.set('ipaddr', process.env.OPENSHIFT_NODEJS_IP || "127.0.0.1");
app.use(bodyParser.json());
app.use(methodOverride());

//Import routes
const chatsRoutes = require('./routes/quizzes');
    
app.use('/quizzes/', chatsRoutes);

app.get('/', (req, res) => {
    res.send("Ready!");
});
 
/** catch 404 and forward to error handler */
app.use('*', (req, res) => {
  return res.status(404).json({
    success: false,
    message: 'API endpoint doesnt exist'
  })
});


//app.use('/', routesRaids);

mongoose.connect('mongodb://localhost/quizes', {useNewUrlParser: true, useUnifiedTopology: true }, () =>
    console.log('Connected to Mongo DB')
);


app.listen(port);