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.