Puedo llegar a este punto final, http://catfacts-api.appspot.com/api/facts?number=99 a través de Postman y devuelve JSON
Además, estoy usando create-react-app y me gustaría evitar configurar cualquier configuración de servidor.
En mi código de cliente, intento usar fetch para hacer lo mismo, pero aparece el error:
No hay ningún encabezado 'Access-Control-Allow-Origin' en el recurso solicitado. Por lo tanto, no se permite el acceso al origen ' http://localhost:3000 '. Si una respuesta opaca satisface sus necesidades, establezca el modo de la solicitud en 'no-cors' para obtener el recurso con CORS deshabilitado.
Entonces, estoy tratando de pasar un objeto a mi Fetch, que deshabilitará CORS, así:
fetch('http://catfacts-api.appspot.com/api/facts?number=99', { mode: 'no-cors'}) .then(blob => blob.json()) .then(data => { console.table(data); return data; }) .catch(e => { console.log(e); return e; }); Curiosamente, el error que recibo es en realidad un error de sintaxis con esta función. No estoy seguro de que mi fetch real esté rota, porque cuando elimino el objeto { mode: 'no-cors' } y le proporciono una URL diferente, funciona bien.
También intenté pasar el objeto { mode: 'opaque'} , pero esto devuelve el error original de arriba.
Creo que todo lo que tengo que hacer es deshabilitar CORS. ¿Qué me estoy perdiendo?
Entonces, si eres como yo y estás desarrollando un sitio web en localhost donde intentas obtener datos de la API de Laravel y usarlos en tu front-end de Vue, y ves este problema, así es como lo resolví:
php artisan make:middleware Cors . Esto creará app/Http/Middleware/Cors.php para usted. Agrega el siguiente código dentro de la función handles en Cors.php :
return $next($request) ->header('Access-Control-Allow-Origin', '*') ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); En app/Http/kernel.php , agregue la siguiente entrada en la matriz $routeMiddleware :
'cors' => \App\Http\Middleware\Cors::class (Habría otras entradas en la matriz como auth , guest , etc. También asegúrese de hacer esto en app/Http/kernel.php porque también hay otro kernel.php en Laravel)
Agregue este middleware en el registro de rutas para todas las rutas a las que desee permitir el acceso, así:
Route::group(['middleware' => 'cors'], function () { Route::get('getData', 'v1\MyController@getData'); Route::get('getData2', 'v1\MyController@getData2'); });mounted() y no en data() . También asegúrese de usar http:// o https:// con la URL en su llamada fetch() .Créditos completos al artículo del blog de Pete Houston.
Si está utilizando Express como back-end, solo tiene que instalar cors e importarlo y usarlo en app.use(cors());. Si no se resuelve, intente cambiar de puerto. Seguramente se resolverá después de cambiar de puerto.