user11161143
user11161143

Reputation:

How do i fix this Cors issue. I'm really stuck

I've been having the following CORS issue for days and I'm no closed to fixing it. The Angular app on localhost:4200 isn't letting me access the route to upload photos.

My backend is in Laravel

I can log in, register, and perform other post requests, but not this.

This is an image of my app.

App

This is my CORS middleware which is registered as a global middleware]

public function handle($request, Closure $next)
{
    return $next($request)
    ->header('Access-Control-Allow-Credentials', 'true')
    ->header('Access-Control-Allow-Origin', 'http://localhost:4200')
    ->header('Access-Control-Allow-Methods:  POST, GET, OPTIONS, PUT, DELETE')
    ->header('Access-Control-Max-Age', '3600')
    ->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Authorization');


}

Reponse Headers in network tab

1

Network 1 2

Network 2 3 Network 3 4 Network 4

Upvotes: 1

Views: 1889

Answers (1)

Zenexer
Zenexer

Reputation: 19613

The images you've posted don't actually match the error you're receiving. Take a look at this answer; note that it mentions the origin being null, which is what you're seeing in your error message. The issue is that your requesting page doesn't have an origin because you're accessing it via the file:// protocol. If you want to use CORS, the requesting file and the destination URL need to be hosted.

Access-Control-Allow-Origin has to match the requesting file, specifically--not the destination URL, as you're attempting to do.

Upvotes: 1

Related Questions