I’m creating a Spring Boot application along with React. I’m working with Spring Boot for the first time. The controller doesn’t seem to be working.

I’ve created a project using Spring Initializr. Right now, I want React to fetch “Hello” from the controller (the ‘home’ method), but it’s not working.

Code for src/main/java/com/project/controllers/DataController.java:

package main.java.com.project.controllers;

import java.util.List;
import java.util.Stack;
import main.java.com.project.model.DataEntry;
import main.java.com.project.repositories.DataRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/data")
@CrossOrigin(origins = "http://localhost:3000")
public class DataController {

    @Autowired
    private DataRepository dataRepository;

    @GetMapping("/")
    public String home()
    {
        return "Home";
    }

    @GetMapping("/filtered")
    public List<DataEntry> function_name() {
        List l = new Stack();
        l.add(0, 1);
        l.add(1, 2);
        return l;

    }

    @GetMapping("/list")
    public List<Integer> list() {
        List<Integer> l = new Stack<>(); // Now using List<Integer>
        l.add(0, 1);
        l.add(1, 2);
        return l;
    }

}

Code for src/main/java/com/project/model/DataEntry.java:

package main.java.com.project.model;

import jakarta.persistence.Entity;
import jakarta.persistence.Id;
import jakarta.persistence.Column;

@Entity
public class DataEntry {

    @Id
    private Long id; // Consider using Long for larger datasets

    @Column(name = "end_year", nullable = true)
    private Integer end_year;

    @Column(name = "citylng", nullable = true)
    private Double citylng;

    @Column(name = "citylat", nullable = true)
    private Double citylat;

    @Column(name = "intensity", nullable = true)
    private Integer intensity;

    @Column(name = "sector", nullable = true)
    private String sector;

    @Column(name = "topic", nullable = true)
    private String topic;

    @Column(name = "insight", nullable = true)
    private String insight;

    @Column(name = "swot", nullable = true)
    private String swot;

    @Column(name = "url", nullable = true)
    private String url;

    @Column(name = "region", nullable = true)
    private String region;

    @Column(name = "start_year", nullable = true)
    private Integer start_year;

    @Column(name = "impact", nullable = true)
    private Integer impact;

    @Column(name = "added", nullable = true)
    private String added;

    @Column(name = "published", nullable = true)
    private String published;

    @Column(name = "city", nullable = true)
    private String city;

    @Column(name = "country", nullable = true)
    private String country;

    @Column(name = "relevance", nullable = true)
    private Integer relevance;

    @Column(name = "pestle", nullable = true)
    private String pestle;

    @Column(name = "source", nullable = true)
    private String source;

    @Column(name = "title", nullable = true)
    private String title;

    @Column(name = "likelihood", nullable = true)
    private Integer likelihood;

}

Code for src/main/java/com/project/repositories/DataRepository.java

package main.java.com.project.repositories;

import org.springframework.data.jpa.repository.JpaRepository;
import main.java.com.project.model.DataEntry;

public interface DataRepository extends JpaRepository<DataEntry, Long> {

}

Code for src/main/java/com/project/DashboardApplication.java:

package com.project;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DashboardApplication {

    public static void main(String[] args) {
        SpringApplication.run(DashboardApplication.class, args);
    }

}

Code for index.js (React):

import React from 'react';
import ReactDOM from 'react-dom/client';
import Home from './Home';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Home />
  </React.StrictMode>
);

Code for Home.js (React):

import React from 'react';
import ReactDOM from 'react-dom/client';
import axios from 'axios';

function Home()
{
  let r;
  const fetchData = async () => {
    const response = await axios.get("http://localhost:8080/data/");
    console.log(response);
    r = response.data;
  }

  fetchData();




  return(
    <>
    <h1>Hello</h1>
    <h1>{ r }</h1>
    </>
  )
}

export default Home;

I’m using ‘mvn spring-boot:run’ to run the spring boot application and there are no errors. When I open localhost:8080, I get this: “Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.

Sun Jul 14 10:22:59 IST 2024
There was an unexpected error (type=Not Found, status=404).”

In the console (localhost:3000) (React page), I get “Access to XMLHttpRequest at ‘http://localhost:8080/data/’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” and “GET http://localhost:8080/data/ net::ERR_FAILED 404 (Not Found)”.