reactjs - 使用反应获取数据的问题

Question

我在 useEffect 钩子上获取数据时遇到了一个罕见的问题......它在 chrome 检查器上给了我“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;

服务器代码是：

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 port = process.env.OPENSHIFT_NODEJS_PORT || 3011;
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);

URL 正确，可直接在浏览器上运行。

有什么问题？

标签： reactjsreact-hooksfetch-api

Answer 1

先打npm install 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);