I am trying to implement the decoupled react and Drupal , in which i am trying use Drupal as backend and react as front end, when i try get a response it comes , but when i am convert the response in json , it gives me the error Uncaught (in promise) SyntaxError: Unexpected end of input , so how should i solve it?

React code ->

  import React, { useState, useEffect } from "react";
  const Exampleno2 = () => {
  const [posts, setPosts] = useState([]);
  var myHeaders = new Headers();
  myHeaders.append("Accept", " application/vnd.api+json");
  myHeaders.append("Content-Type", "application/vnd.api+json");

  var requestOptions = {
    method: "GET",
    headers: myHeaders,
    redirect: "follow",
  };
  const fetchPost = async () => {
    const response = await fetch(
      "http://localhost/drupalwebsite/jsonapi/node/banner",
      { mode: "no-cors" },
      requestOptions
    );
    console.log(response);
    const data = await response.json();
    console.log(data)
    };
    useEffect(() => {
    fetchPost();
    }, []);
  return (
    <div>
      <h1>hello</h1>
    </div>
  );
};

export default Exampleno2;

This is Drupal backend service.yml file code->

cors.config:
  enabled: true
  # Specify allowed headers, like 'x-allowed-header'.
  allowedHeaders: [ '*','accept','application/vnd.api+json', 'access-control-allow-origin' ]
  # Specify allowed request methods, specify ['*'] to allow all possible ones.
  allowedMethods: [ '*' ]
  # Configure requests allowed from specific origins.
  allowedOrigins: [ 'http://localhost/','http://localhost:3000','http://localhost:3001','http://localhost:3002','*' ]
  # Sets the Access-Control-Expose-Headers header.
  exposedHeaders: false
  # Sets the Access-Control-Max-Age header.
  maxAge: false
  # Sets the Access-Control-Allow-Credentials header.
  supportsCredentials: true 

i don't understand what did i do wrong in the code 😅? pls somebody help me 😥?