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 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. = dataExcel

this.http.get('' + dataExcel.file_piece_correct, { responseType: 'blob' })
    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:


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": "",
    "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

Source: Laravel

Leave a Reply