Tengo una aplicación web con frontend de reacción y backend de django. Algunas de las API del backend están bloqueadas por la política cors, mientras que otras no. Por ejemplo, la API para obtener publicaciones de blog const res = await axios.get(`${process.env.REACT_APP_API_URL}/blog/posts`) devuelve datos, pero la API para publicaciones individuales const res = await axios.get(`${process.env.REACT_APP_API_URL}/blog/${slug}`); está bloqueado. Las API de registro e inicio de sesión también están bloqueadas. Agregué el dominio a la lista de URL permitidas en settings.py, pero eso no resolvió el problema. El error que estoy recibiendo en la página de detalles es:
undefined:1 Access to XMLHttpRequest at 'https://.api.example.co/blog/undefined' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.configuración.py
MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', ... ] CORS_ORIGIN_ALLOW_ALL = False CORS_ALLOWED_CREDENTIALS = True CORS_ALLOWED_ORIGINS = [ 'http://127.0.0.1:8000', 'http://localhost:3000', 'https://example.co', ] CORS_ORIGIN_WHITELIST = [ 'http://127.0.0.1:8000', 'http://localhost:3000', 'https://example.co', ] CORS_ALLOW_HEADERS = [ 'accept', 'accept-encoding', 'authorization', 'content-type', 'dnt', 'origin', 'user-agent', 'x-csrftoken', 'x-requested-with', ] CORS_REPLACE_HTTPS_REFFERER = TrueCuando uso Postman para probar la API, todo funciona correctamente. Pero en la aplicación de reacción, solo la API enumera las publicaciones o los elementos que devuelven datos, otros están bloqueados. ¿Por qué tal comportamiento y cómo lo soluciono?
Este problema tiene dos partes. 1.¿Cuál es el problema? 2. ¿Cómo puede resolver este problema por completo o en la actualidad? Creo que su problema es que su API de back-end no agrega su host para permitir Host en su código. Cuando ejecuta su proyecto, se crea un host virtual en su sistema que llama a su Api desde su servidor virtual, esa es solo la razón por la que su solicitud falló desde su proyecto de ejecución y pasó del cartero. En realidad, cambiar su código back-end o la configuración del servidor web que puede permitir desde otros orígenes puede resolver su problema. Pero si no accede a su equipo de back-end y desea resolver su problema usted mismo, puede agregar la extensión de encabezado de núcleos de su navegador que puede aprobar su solicitud para su caso de prueba. Al final, te doy una buena extensión para tu navegador Chrome. https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en