javascript - uncaught - Respuesta del controlador: SyntaxError: final inesperado de la entrada cuando se utiliza el modo: ''no-cors''

unexpected end of input angular

Question

Intenté una llamada de recuperación de ReactJS a una REST-API y quiero manejar la respuesta. La llamada funciona, obtengo una respuesta, que puedo ver en Chrome Dev Tools:

function getAllCourses() {
fetch(''http://localhost:8080/course'', {
    method: ''POST'',
    mode: ''no-cors'',
    credentials: ''same-origin'',
    headers: {
        ''Accept'': ''application/json'',
        ''Content-Type'': ''application/json'',
    },
    body: JSON.stringify({
        objectClass: ''course'',
        crud: ''2''
    })
}).then(function (response) {
    console.log(response);
    return response.json();

}).catch(function (err) {
    console.log(err)
});
}

Cuando intento manejar la respuesta, aparece un "SyntaxError: Fin de entrada inesperado" en

return response.json();

El console.log se ve así:

Mi respuesta JSON se ve así, es válido, lo verifiqué con jsonlint:

[
  {
    "0x1": {
      "users": [],
      "lectures": [],
      "owner": "0x2",
      "title": "WWI 14 SEA",
      "description": null,
      "objectClass": "course",
      "id": "course_00001"
    },
    "0x2": {
      "username": "system",
      "lectures": [],
      "course": null,
      "solutions": [],
      "exercises": [],
      "roles": [
        "0x3",
        "0x4",
        "0x5"
      ],
      "objectClass": "user",
      "id": "user_00001"
    },
    "0x3": {
      "roleName": "ROLE_ADMIN",
      "objectClass": "role",
      "id": "role_00001"
    },
    "0x4": {
      "roleName": "ROLE_STUDENT",
      "objectClass": "role",
      "id": "role_00002"
    },
    "0x5": {
      "roleName": "ROLE_DOCENT",
      "objectClass": "role",
      "id": "role_00003"
    }
  }
]

Answer 1

Debe eliminar el mode: ''no-cors'' configuración mode: ''no-cors'' de su solicitud. Ese mode: ''no-cors'' es exactamente la causa del problema que está teniendo.

Un mode: ''no-cors'' solicitud mode: ''no-cors'' hace opaque tipo de respuesta. El fragmento de registro de la consola en la pregunta lo muestra claramente. Y opaque significa que el código JavaScript de su interfaz no puede ver el cuerpo de respuesta o los encabezados.

https://developer.mozilla.org/en-US/docs/Web/API/Request/mode explica:

no-cors : JavaScript no puede acceder a ninguna propiedad de la Response resultante

Entonces, el efecto del mode: ''no-cors'' de configuración mode: ''no-cors'' es esencialmente decirle a los navegadores: "No dejen que el código JavaScript frontend acceda al cuerpo de respuesta o encabezados bajo ninguna circunstancia".

Me imagino que está configurando el mode: ''no-cors'' para la solicitud porque la respuesta de http://localhost:8080/course no incluye el encabezado de respuesta Access-Control-Allow-Origin o porque su navegador está haciendo OPTIONS solicitud a http://localhost:8080 porque su solicitud es una que desencadena una verificación previa CORS .

Pero el mode: ''no-cors'' configuración mode: ''no-cors'' no es la solución a esos problemas. La solución es:

• configure el servidor http://localhost:8080 para enviar el encabezado de respuesta Access-Control-Allow-Origin y para manejar la solicitud OPTIONS

• o configure un proxy CORS utilizando el código de https://github.com/Rob--W/cors-anywhere/ o similar (consulte Cómo usar un proxy CORS para evitar el encabezado "Sin acceso-Control-Permitir-Origen" " Sección de problemas de la respuesta en el encabezado No ''Access-Control-Allow-Origin'' está presente en el recurso solicitado, al intentar obtener datos de una API REST )

Answer 2

En su, then debe verificar si la respuesta es correcta antes de devolver response.json :

.then(function (response) {
    if (!response.ok) {
        return Promise.reject(''some reason'');
    }

    return response.json();

})

Si desea que aparezca el mensaje de error en su promesa rechazada, puede hacer algo como:

.then(function (response) {
    if (!response.ok) {
       return response.text().then(result => Promise.reject(new Error(result)));
    }

    return response.json();
})

Answer 3

Puede evitar el problema con la política CORS agregando en el encabezado de php u otro punto final del servidor la fila:

<?php
header(''Access-Control-Allow-Origin: *'');
//or
header(''Access-Control-Allow-Origin: http://example.com'');

// Reading JSON POST using PHP
$json = file_get_contents(''php://input'');
$jsonObj = json_decode($json);

// Use $jsonObj
print_r($jsonObj->message);

...
// End php
?>

El modelo de código de búsqueda de trabajo con solicitud POST es:

const data = {
        optPost: ''myAPI'',
        message: ''We make a research of fetch''
    };
const endpoint = ''http://example.com/php/phpGetPost.php'';

fetch(endpoint, {
    method: ''POST'',
    body: JSON.stringify(data)
})
.then((resp) => resp.json())
.then(function(response) {
    console.info(''fetch()'', response);
    return response;
});

Answer 4

Sé que esta respuesta podría llegar muy tarde y podría haberse resuelto, pero hoy tuve el mismo problema y solo necesitaba agregar un '','' al final del encabezado hash y dejé de recibir el error

export function addContacts(formData) {
  return(dispatch) => {
    dispatch({type: ''POSTING_CONTACTS''});
    console.log(formData)
    return fetch(uri, {
      method: ''POST'',
      body: JSON.stringify({contact: {name: formData.name, phone_number: formData.phoneNumber}}),
      headers: {
        Accept: ''application/json'',
        ''Content-Type'': ''application/json''
      },
    })
    .then(response => {
        return response.json()
      }).then(responseJSON => {
        console.log(responseJSON)
        return dispatch({type: ''ADD_CONTACT'', payload: responseJSON});
      })
  }
}     

Answer 5

Simplemente copie el siguiente código y péguelo en su archivo web.config bajo la etiqueta <system.webServer> .

<httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>