Después de investigar con expertos en la materia, programadores de diversas áreas y maestros dimos con la solución a la cuestión y la dejamos plasmada en esta publicación.
Solución:
Acabo de tener el mismo problema. Logré que esto funcionara agregando "proxy": "http://localhost:4000"
a package.json
.
Entonces puedes escribir solicitudes como fetch('/api/todos')
.
Aquí lo explican bien.
Si está intentando enviar una solicitud a localhost y está alojando su servidor en localhost, entonces no necesita especificar la URL, solo necesita decir fetch()
tu camino.
Por ejemplo, mi punto final de API es http://localhost:8082/api/config
entonces lo haría fetch('/api/config')
.
Aquí hay un enlace a fetch
método, enlace
Cuando escribes localhost
llama a su máquina (localhost) (en la que está presente el navegador) porque el js
el código se está ejecutando en su navegador.
Debe crear un dominio/subdominio para su punto final de API y usarlo en lugar de localhost o continuar usando la dirección IP codificada.
También debe permitir solo el dominio de su sitio web frontend en los orígenes permitidos para su backend. Ex. tu sitio web puede ser www.example.com
y la URL del servidor puede ser www.api.example.com
. Debes permitir solo www.example.com
como el origin
que se puede servir a través de www.api.example.com
. Deberá configurar esto en el backend.
Al final de la artículo puedes encontrar las explicaciones de otros usuarios, tú de igual manera tienes la habilidad insertar el tuyo si lo crees conveniente.