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');
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. SaludosUsuariosController
, 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 agregarheader('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');