Access to images from Angular to Laravel public path

  angular, cors, javascript, laravel, typescript

I’m stucked with the next issue… I’m getting some files with the url of them I mean www.api.com/filepath-from-db. but when I make the get method this trowme an Unknown Error as response from the API the first problem was the CORS but I think i fix it because dont say me anything about it. Im trying to convert the images to base64 to add to a exceljs file. here is my code.

this.data = dataExcel

this.http.get('http://api.com' + dataExcel.file_piece_correct, { responseType: 'blob' })
  .pipe(
    switchMap(blob => this.convertBlobToBase64(blob))
  )
  .subscribe(base64ImageUrl => console.log('yes'));

when I activate a plugin of chrome that set the CORS (the name of the plugin is Moesif CORS) it works.

In my Laravel API I create a middleware and i set this:

<?php

namespace AppHttpMiddleware;

use Closure;
use IlluminateHttpRequest;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  IlluminateHttpRequest  $request
     * @param  Closure  $next
     * @return mixed
     */
    public function handle(Request $request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
            
    }
}

And in my Angular app I create the proxy (or I think is that way)

{
  "/": { //I leave the '/' because is the public path so I think that way is correct
    "target": "http://api.com",
    "secure": false,
    "changeOrigin": true
  }
}

And in my package.json is:

"start": "ng serve --proxy-config proxy.conf.json",

As a example I want to get this image http://api.marandacti.com/storage/uploads/mFZ2b2etMW.jpeg

Source: Laravel

Leave a Reply