1

estoy queriendo consumir una api que hice en Laravel desde ionic.. Simplemente es una prueba pues estoy empezando en ionic. Para consumir la api cree un servicio

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class EncuestasService {

  constructor(private http: HttpClient ) { }

  getTiendas() {
    return this.http.get(`http://192.168.1.110:8000/api/tiendas`);
  }
}

Luego voy al page.ts de mi pagina y lo llamo

import { Component, OnInit } from '@angular/core';
import { EncuestasService } from '../../services/encuestas.service'

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit {
    constructor(private tiendasService: EncuestasService) {}

    ngOnInit() {
        this.tiendasService.getTiendas()
        .subscribe(respuesta => {
            console.log(respuesta);
        });
    }
}

y luego me bloquea el navegador la peticion con este error en consola Access to XMLHttpRequest at 'http://192.168.1.110:8000/api/tiendas' from origin 'http://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

El codigo se que funciona porque probe consumir otra api y funciona

https://jsonplaceholder.typicode.com/users

Asi que pienso que es un problema de servidor o es por mi localhost.. La verdad no entiendo bien el problema.. Mi controlador

public function index()
    {
        //
        $users = User::where('activo', '=', '1')->get();
        return ['users' => $users];
    }

mi api.php

Route::resource('/tiendas', 'UsuariosController');
8
  • 1
    Debes agregar el encabezado en el lado Servidor. Prueba: header("Access-Control-Allow-Origin: http://localhost:8100");, para dar acceso sólo a tu webpack local. Puedes leer un poco sobre el tema en MDN. Saludos Commented el 24 abr. 2019 a las 19:21
  • Disculpa,como agrego el encabezado? Commented el 24 abr. 2019 a las 19:24
  • Lo agregas en tu controlador. Aunque @abrahamhs te dio una solución global. Sin embargo si deseas tener control sobre CORS en cada app, lo haces en tu código PHP antes de enviar los datos al cliente. Como ya dije, lo haces en tu controlador. Commented el 24 abr. 2019 a las 19:28
  • Entonces lo agrego dentro de mi metodo y nada mas? Commented el 24 abr. 2019 a las 19:36
  • 1
    Claro, suponiendo que tu controlador es UsuariosController, las primeras lineas del mismo podrían ser: <?php (salto de linea) header("Access-Control-Allow-Origin: http://localhost:8100"); (salto de linea) header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");, además si deseas poner un header preflight, puedes agregar header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE'); Commented el 24 abr. 2019 a las 19:44

2 respuestas 2

1

Existe una manera muy facil en Ionic de poder consumir apis, como entenderas tu aplicación no esta en el mismo host que tus servicios y existe una configuración dentro del archivo ionic.config.json

"proxies": [
    {
       "path": "/api_tiendas",
       "proxyUrl": "http://192.168.1.110:8000/api/"
    }
 ],

Entonces, ahora cada llamado que hagas a la api debe ser asi:

return this.http.get('/api_tiendas/tiendas');

Por qué te recomiendo esta forma? Porque la aplicación desde los dispositivos no obtendras estos errores de cors, sin embargo, para pruebas con ionic serve te evitas configurar tu servidor para que acepte llamadas desde cualquier fuente.

0

Para evitar el error blocked by CORS policy: No 'Access-Control-Allow-Origin hay que editar el archivo httpd.conf de apache y agregar si estamos en apache wampp

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
</IfModule>

en xampp pudiera ser

 <IfModule mod_headers.so>
  Header set Access-Control-Allow-Origin "*"
</IfModule>

o incluir ambos y reiniciar el servidor

5
  • agregue a mi apache2.conf la linea de codigo que me pasaste pero el error persiste Commented el 24 abr. 2019 a las 19:33
  • En node.js con angular a mi me salia ese error y así lo elimine, acabo de revisar mi xampp y así esta configurado. Tal vez lo aplicaste EN EL OTRO servidor o tal vez estas haciendo otra cosa mal, revisa tus rutas.
    – abrahamhs
    Commented el 24 abr. 2019 a las 19:39
  • De hecho es mas o menos lo mismo que te recomienda @Mauricio Contreras solo que eso aplica solo a ese script.
    – abrahamhs
    Commented el 24 abr. 2019 a las 19:41
  • Use la solucion de mauricio y agregue header("Access-Control-Allow-Origin: http://localhost:8100"); a mi index.php Commented el 24 abr. 2019 a las 19:41
  • 1
    No modifiques el servidor para aceptar llamados libres, puede causarte problemas de seguridad
    – sioesi
    Commented el 27 abr. 2019 a las 12:53

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.