0

cuando realizo la peticion GET para mostrar un listado de productos, me sale: Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en http://localhost:8080/curso-angular-backend/index.php/productos (razón: falta la cabecera CORS 'Access-Control-Allow-Origin'). Código de estado: 404. introducir la descripción de la imagen aquí

Solicitud de origen cruzado bloqueada: La misma política de origen no permite la lectura de recursos remotos en http://localhost:8080/curso-angular-backend/index.php/productos. (Razón: Solicitud CORS sin éxito). Código de estado: (null).

Estoy trabajando con Angular14 con Slim, tambien uso un API REST en Postman Tengo un proyecto backend y otro frontend

adjunto codigo del frontend: producto.service.ts:

import { Routes, RouterModule } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { Producto } from '../models/producto';
import { GLOBAL } from './global';
@Injectable()
export class ProductoService{
     public url: string;

 constructor(public _httpClient: HttpClient){
    this.url = GLOBAL.url;
 }

//metodo de prueba
getPrueba(){
    return "Texto desde el servicio...";
}

//metodo listado de productos
 getProductos():Observable<any>{
    let headers = new HttpHeaders().set('Content-Type', 'application/json');

    return this._httpClient.get(this.url+'productos', {headers: headers});
 }}

producto.component.ts:

import { Observable } from 'rxjs';
@Component({
   selector: 'productos-list',
   templateUrl: '../views/productos-list.html',
   providers: [ProductoService]
})
export class ProductosListComponent{
    public titulo: string;
    public productos: Producto[] = [];
 constructor(private _productoService: ProductoService){
    this.titulo = 'Listado de productos..';
 }
 ngOnInit(){
    console.log('productos-list-component.ts cargado...');
    console.log("Objeto: "+this._productoService.getProductos());

    this._productoService.getProductos().subscribe(
        (result:any) => {
            if(result.code != 200){
                console.log("result if: "+ result);
            }
            else{
                this.productos = result.data;
            }
        },
        (error:any) =>{
            console.log("ERROR: "+ error);
        }
    );
}

de este codigo directo se pasa a error, ya q devuelve un [object Object]

gracias de antemano por la ayuda!!!

2
  • Busca en el sitio las preguntas que incluyan la etiqueta [cors] y la etiqueta [angular*] (el asterisco es para que te traiga cualquier coincidencia que incluya al principio la palabra angular). ¿Has encontrado algo?
    – padaleiana
    Commented el 20 ago. 2022 a las 11:32
  • vi la solución para php en este video: youtube.com/watch?v=hGxA-P0gwnw Espero les sirva
    – Ruth
    Commented el 2 nov. 2022 a las 19:23

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.