I’m having a problem consuming my REST API made in Java

i am trying to consume a local rest api using fetch in javascript, this is the error ‘localhost/:1 Access to fetch at ‘http://localhost:8080/api/v1/movies’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.’,

import "./App.css";
//import api from "./api/axiosConfig";
import { useState, useEffect } from "react";
function App() {
  const [movies, setMovies] = useState();

  const getMovies = async () => {
    const url = "http://localhost:8080/api/v1/movies";
    fetch(url)
      .then((response) => response.json())
      .then((data) => console.log(data))
      .catch((err) => console.log(err));
  };

  useEffect(() => {
    getMovies();
  }, []);

  return <div className="App"></div>;
}

export default App;

i added the second parameter to the method fetch

import "./App.css";
//import api from "./api/axiosConfig";
import { useState, useEffect } from "react";
function App() {
  const [movies, setMovies] = useState();

  const getMovies = async () => {
    const url = "http://localhost:8080/api/v1/movies";
    fetch(url, {
      method: "GET",
      headers: { "Content-type": "application/json" },
      mode: "no-cors",
    })
      .then((response) => response.json())
      .then((data) => console.log(data))
      .catch((err) => console.log(err));
  };

  useEffect(() => {
    getMovies();
  }, []);

  return <div className="App"></div>;
}

export default App;

and then i have this error ‘SyntaxError: Unexpected end of input (at App.js:13:1)
at App.js:13:1’ Thank you for your help in advance.

I looked up what caused the error, but I didn’t find anything similar.