Issue fetching data with react

Question

I have a rare issue fetching data on a useEffect hook....It gives me "CORS error" on chrome inspector... here is my code:

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;

The server code is:

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);

The URL is correct and works directly on the browser.

What's the issue?

There are _so many_ posts about CORS - you need to fix it _on the server_. — jonrsharpe, Apr 17 '21 at 12:34
So... does that external server set the appropriate headers? What exactly _is_ the error? — jonrsharpe, Apr 17 '21 at 12:39
And my other question? Do you think you _have_ set the right header? Showing the client code is pointless, it's the server code that's relevant. — jonrsharpe, Apr 17 '21 at 12:46
this is my firts react app, before I made some react native apps which do not had this issue! Updated with server code. — Marco Martin, Apr 17 '21 at 12:49
And where in your server code do you think you do set the appropriate CORS config, exactly? Research e.g. "express server CORS". — jonrsharpe, Apr 17 '21 at 12:50
Does this answer your question? [Problems with express and CORS](https://stackoverflow.com/questions/51694612/problems-with-express-and-cors) — Ashkan, Apr 17 '21 at 16:19

score 0 · Answer 1 · answered Apr 17 '21 at 13:05

First hit npm install cors , then

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);

Now, I get (failed)net::ERR_CONNECTION_REFUSED. Server is of course started — Marco Martin, Apr 17 '21 at 17:17
@MarcoMartin Please verify the URL you are using to call from front-end is same in which server is running — Phil, Apr 17 '21 at 19:01
I hard coded the url and get connection refused... doing a curl from console to same url is done without issue! — Marco Martin, Apr 17 '21 at 19:59

Issue fetching data with react

1 Answers1