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

Question

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.

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

2

3 4

have you chec with `header('Access-Control-Allow-Origin: http://yourdomain.com/');` in your route file — Bhagwat Tupe, Apr 03 '19 at 16:50
yes but your `option` request status is 200 , its not a cors issue — Bhagwat Tupe, Apr 03 '19 at 16:55
@bhagwattupe If you look at the first issue it says blocked by cors policy — , Apr 03 '19 at 16:56
You can create request middle ware check these link https://medium.com/@petehouston/allow-cors-in-laravel-2b574c51d0c1 — Bhagwat Tupe, Apr 03 '19 at 16:59
If you change `ACCESS-CONTROL-ALLOW-ORIGIN` to "*" do you still get blocked by CORS? This is related to the pre-flight request, which can be kind of tricky. — TheBatman, Apr 03 '19 at 17:05
@AndreMacNamara I believe that this issue is causing due to redirect from `127.0.0.1:8000/api/advertisment/{id}/create` to `locahost:4200/advert/create` as the origin is set to null with redirect. Check this post here: https://stackoverflow.com/questions/22397072/are-there-any-browsers-that-set-the-origin-header-to-null-for-privacy-sensitiv — Mohsin Mehmood, Apr 03 '19 at 17:18

score 1 · Answer 1 · answered Apr 03 '19 at 22:47

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.

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

1 Answers1