Tengo un problema con mi aplicación JavaScript isomórfica que usa React y Express.
Estoy tratando de hacer una solicitud HTTP con axios.get cuando mi componente se monta
componentDidMount() { const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders'; axios.get(url).then( res => { //use res to update current state }) }Obtengo un estado de 200 res de la API, pero no recibo ningún dato de respuesta y recibo un error en mi consola
XMLHttpRequest cannot load http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.Sin embargo, si hago la solicitud en mi server.js
const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders'; axios.get(url).then(res => { //console.log(res); });Funciona bien y obtengo datos de respuesta cuando se inicia el servidor. ¿Se trata de un problema con la API real o estoy haciendo algo mal? Si se tratara de un problema de CORS, supongo que la solicitud en server.js tampoco funcionaría. ¡Gracias!
CORS es una característica del navegador . Los servidores deben optar por CORS para permitir que los navegadores eludan la política del mismo origen. Su servidor no tendría esa misma restricción y podría realizar solicitudes a cualquier servidor con una API pública. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Cree un punto final en su servidor con CORS habilitado que pueda actuar como un proxy para su aplicación web.
¡CORS debería estar habilitado en el lado del servidor! si no puede activarlo en el servidor (por ejemplo, usando una API externa), cree un middleware React -> Middleware -> Orginal Server .
Cree un proyecto Node.js (Middleware) y use el siguiente código en app.js
const express = require("express"); var cors = require('cors') const app = express(); app.use(cors()); const { createProxyMiddleware } = require('http-proxy-middleware'); app.use('/api', createProxyMiddleware({ target: 'http://localhost:8080/', //original url changeOrigin: true, //secure: false, onProxyRes: function (proxyRes, req, res) { proxyRes.headers['Access-Control-Allow-Origin'] = '*'; } })); app.listen(5000); Esto pasará la solicitud http://localhost:5000/api/xxx al servidor original (por ejemplo http://localhost:8080/api/xxx ) y devolverá el resultado al cliente.
Cambie el cliente (Reaccionar) para llamar al proxy y obtener datos sin error CORS (solo necesita cambiar el puerto en la URL):
axios.get('http://localhost:5000/api/xxx', //proxy uri { headers: { authorization: ' xxxxxxxxxx' , 'Content-Type': 'application/json' } }).then(function (response) { console.log(response); }); ejecute node project node app.js y reaccione project npm start .
Use la extensión de Google Chrome llamada Allow-Control-Allow-Origin: * . Modifica los encabezados CORS sobre la marcha en su aplicación.