Access to XMLHttpRequest has been blocked by CORS policy - Laravel 5.8

Question

So I know the issue here is that im trying to send a POST request from example.com to localhost. What I'm not sure about is why this isn't working, as from what I can tell, I've added everything to Laravel via the nuclear option.

In Laravel, I've added to my public/index.php the following:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS'):

I know this isn't the ideal way to do this, however I was having the same issues using Cors middleware too.

My client is a React app using Axios to send a POST request from the browser, and in the network tab I can see the following:

My Axios request looks like so:

await axios({
  method: 'POST',
  url: 'http://localhost:8000/api/webhooks/platform',
  data: notification.data,
  headers: {
    Origin: 'https://example.com'
  }
});

Does anyone know where I'm going wrong? My versions are below, and are strict. I cannot change these:

{
  "php": "^7.1.3",
  "laravel/framework": "5.8.*",
  "laravel/nexmo-notification-channel": "^2.5",
  "laravel/tinker": "^1.0",
  "nexmo/laravel": "^2.4",
}

I tried this answer but I'm getting Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

app/Http/Middleware/Cors.php

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($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-Credentials', true)
            ->header('Access-Control-Allow-Headers', 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range');
    }
}

Kernel.php

    protected $routeMiddleware = [
       ......
        'cors' => \App\Http\Middleware\Cors::class,
    ];

routes/api.php

Route::post('/webhooks/platform', 'WebhooksController@handlePlatformNotification') -> middleware('cors');

Odin Thunder · Answer 1 · 2021-08-06T10:11:29.640

0

Try to extend your solution, I hope it help you:

header('Access-Control-Allow-Credentials', true)
header('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type,X-Token-Auth,Authorization')

To implement all this "header" logic I recommend you to use Laravel Middleware

If you deal with it and want to see extended and flexible solving of CORS problem - check this package

UPD: It seems the problem is in 'Access-Control-Allow-Origin' wildcard. Check this answer for details

UPD2: Btw, check this. If your own middleware not even fire - problem in middleware priority

edited Aug 06 '21 at 10:11

answered Aug 06 '21 at 09:05

Odin Thunder

3,284
2
28
47

So I jus tried this with middleware, adding the origin, methods, credentials and headers as middleware but still get the same issue. Will update question with code – K20GH Aug 06 '21 at 09:10
hmmm, when I faced with CORS problem I have had one more problem with 'Access-Control-Allow-Origin' wildcard (*). Coud you test your solution without it? – Odin Thunder Aug 06 '21 at 09:21
I'm not convinced the Cors implementation is even working. Looking at the OPTIONS call to the server, the response doesn't have any of the Access Control headers added to it – K20GH Aug 06 '21 at 09:56
Maybe problem in middleware priority – Odin Thunder Aug 06 '21 at 10:09
Yup thought that too but adding in Cors at the top hasn't helped :( – K20GH Aug 06 '21 at 12:16
Do U use Laravel Passport? – Odin Thunder Aug 06 '21 at 12:47
Nope, nothing like that. Only the packages that are in the question. I've done some logging in the middleware. If i call directly from postman its logging, but from the browser, nothing :/ – K20GH Aug 06 '21 at 14:42
Fixed it. Nothing to do with anything like this :(. All to do with how Laravel routes requests: https://stackoverflow.com/questions/57042612/laravel-cors-middleware-not-working-with-post-request – K20GH Aug 06 '21 at 15:03

Access to XMLHttpRequest has been blocked by CORS policy - Laravel 5.8

1 Answers1