Estoy tratando de implementar la reacción desacoplada y Drupal, en la que intento usar Drupal como back-end y reaccionar como front-end, cuando intento obtener una respuesta, aparece, pero cuando convierto la respuesta en json, me da el error No detectado (en promesa) SyntaxError: final inesperado de la entrada , entonces, ¿cómo debo resolverlo?

Código de reacción ->

 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;

Este es el código del archivo backend service.yml de Drupal->

 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

no entiendo que hice mal en el codigo 😅? por favor alguien me ayuda 😥?