He estado tratando de crear un reaccionan de la aplicación web de pocos días para mi pasantía y me he encontrado con un CORS de error. Estoy usando la última versión de reactJS, y la colocación de esta en el create-react-app, y a continuación está el código para ir a buscar:

componentDidMount() {
  fetch('--------------------------------------------',{
    method: "GET",
    headers: {
      "access-control-allow-origin" : "*",
      "Content-type": "application/json; charset=UTF-8"
    }})
  .then(results => results.json())
  .then(info => {
    const results = info.data.map(x => {
      return {
        id: x.id,
        slug: x.slug,
        name: x.name,
        address_1: x.address_1,
        address_2: x.address_2,
        city: x.city,
        state: x.state,
        postal_code: x.postal_code,
        country_code: x.country_code,
        phone_number: x.phone_number,
      }
    })
    this.setState({warehouses: results, lastPage: info.last_page});
  })
  .then(console.log(this.state.warehouses))
 }

Yo siento que no puedo publicar la url de la API, debido a la normativa de la empresa, sin embargo, se confirma que no hay CORS en la configuración de la API de backend.

Sin embargo, me encuentro con los siguientes errores cuando se ejecuta en mozilla

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ------------------. (Reason: CORS header Access-Control-Allow-Origin missing).

y

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ---------------------------------------------. (Reason: CORS request did not succeed).

Si funcione en chrome, el navegador da el siguiente error

Failed to load resource: the server responded with a status of 405 (Method Not Allowed)

y

Failed to load --------------------------------------------------------: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

y

Uncaught (in promise) TypeError: Failed to fetch

Otra cosa es que yo soy capaz de abrir la url en mi navegadores sin problemas o lo que sea.

Por favor ayuda y gracias!

Información Adicional

La razón por la que he añadido la CORS configuración es porque le da un CORS error, por lo que su eliminación no soluciona realmente el problema.

Siguiente traté de realizar la configuración del proxy, sin embargo, que ahora da

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0

De acuerdo a la internet, esto es causado porque la respuesta no es un JSON. Sin embargo, cuando revisé la API que ofrece este

api img

lo que significa que el tipo de retorno debe ser un JSON derecho?

Información Adicional

la comprobación de la respuesta va a rendir este

{«status»:200,»total»:1,»per_page»:3,»current_page»:1,»last_page»:1,»next_page_url»:null,»prev_page_url»:null,»from»:1,»to»:3,»data»:[{«id»:1,»slug»:»america»,»name»:»america»,»address_1″:»estados UNIDOS Court»,»address_2″:»USA»,»city»:»USA»,»state»:»USA»,»postal_code»:»94545″,»country_code»:»US»,»phone_number»:»10000001″,»created_by»:null,»updated_by»:null,»created_at»:»2017-11-10 11:30:50+00″,»updated_at»:»2018-06-28 07:27:55+00″}]}

  • ¿Has probado a configurar un proxy en su package.json? En algún lugar por encima de sus dependencias: "proxy": "http://yourAPI"
  • no use respuesta encabezados en un solicitud (es decir, access-control-allow-origin es un encabezado de respuesta) – esto llevará inevitablemente a desencadenar un CORS de comprobaciones, que el servidor no puede entender – pero, si el servidor no permite CORS, no hay nada que un cliente puede hacer directamente
  • se confirma que no hay CORS en la configuración de la API de back – end, a continuación, CORS no será permitido – te he respondido a tu propia pregunta!!! leer cómo CORS trabaja aquí
  • Si no CORS habilitado o api no sirve JSONP tienes que usar un proxy en el servidor de control de terceros o servicios de terceros
  • todavía arroja un CORS de error incluso si me quita el cors, para comenzar con sólo fue colocado allí después de encontrarse con un cors de error. Voy a probar el proxy de lo primero
InformationsquelleAutor Last | 2018-07-02

1 Comentario

  1. 15

    El CORS configuración debe ser configurada en el API para permitir el acceso desde su Reaccionan dominio de la aplicación. No CORS valores, no AJAX de diferentes dominios. Es tan simple como eso. Usted puede agregar CORS la configuración de su empresa API (esto es poco probable que suceda) o usted puede evitar como se describe a continuación:

    El CORS es únicamente un mecanismo de navegador del cliente para proteger a los usuarios maliciosos AJAX. Así que una manera de evitar esto es proxy de su petición AJAX a partir de su Reaccionan de aplicación, en su propio servidor web. Como Vicente sugiere, el create-react-app proporciona una manera fácil de hacer esto: en su package.json archivo, simplemente chuck "proxy": "http://your-company-api-domain". Para más detalles, por favor ver este enlace

    A continuación, en su reaccionan aplicación se puede utilizar relativa URL como esta: fetch('/api/endpoints'). Observe que la dirección URL relativa para que coincida con su empresa de la API. Esto enviará una solicitud al servidor, el servidor enviará la solicitud a la empresa de la API y devolver la respuesta de regreso a su aplicación. Desde que la solicitud sea manejada en el servidor-a-servidor de forma no en el navegador y el servidor por lo que el CORS de verificación no va a suceder. Por lo tanto, usted puede deshacerse de todos los CORS encabezados en su solicitud.

    • Hola, he añadido la configuración de proxy y el CORS error hizo desaparecer, pero un nuevo error apareció ‘no Controlada de Rechazo (SyntaxError): testigo Inesperado < en JSON en la posición 0’
    • eso significa que usted omitir el CORS. Pero la respuesta no es válida JSON. Observe que la respuesta ha «<» como primer carácter por lo que es probable en formato XML. Podría inspeccionar su respuesta y publicar en tu questtion?
    • Siento interrumpir, pero es probable que el servidor proxy de responder con 404.
    • ¿qué sucede si el servidor proxy no responde con 404?
    • publicado en la respuesta
    • La respuesta debería ser el formato JSON
    • la respuesta que el post es en realidad el objeto contenedor de los datos devueltos. Solo decir que la petición fue manejado con éxito. Podría obtener y publicar el contenido de la respuesta en su lugar? Más detalles aquí: developer.mozilla.org/en-US/docs/Web/API/Body/text
    • lo siento, no sabía que todavía nuevo para reaccionar. Actualizado
    • la respuesta que obtuve fue un JSON válido y parece que tienes los datos de la API. Así que no sé qué error tienes aquí. Tal vez usted puede agregar un .catch(error => console.log(error)) a su captura de llamada y depuración de allí
    • gracias a ti fui capaz de encontrar el error. Después de saber cómo mirar la respuesta, sabía que no había nada malo con la API, así que decidí eliminar la asignación y que se ha solucionado el problema. También he probado varias cosas y se encontró que el CORS error aparece cuando se comete un error en la tracción de la información que no existe

Dejar respuesta

Please enter your comment!
Please enter your name here