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
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
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 supackage.json
archivo, simplemente chuck"proxy": "http://your-company-api-domain"
. Para más detalles, por favor ver este enlaceA 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.404
..catch(error => console.log(error))
a su captura de llamada y depuración de allí