CORS issue with laravel 10

Question

I'm creating a project with Laravel that will have to connect to my frontend created with react. I hosted the backend on 000webhost but it gives me CORS error when I try to make an api call. I read that for Laravel 10 you no longer use fruitcake/laravel-cors but just have

 \Illuminate\Http\Middleware\HandleCors::class

the app/Http/Kernel.php file. I've already done this but it keeps giving me the same errors. How do I solve it?

Do I need to specify the Middleware in the routes or does it apply automatically?

The error Cross-origin request blocked: Origin match policy does not allow reading remote resource from https://expense-api.000webhostapp.com/api/login. Reason: CORS request failed. Status code: (null).

You wrote: [...] it keeps giving me the same errors. How do I solve it? But what error messages(s) are you referring to? That's vital information for getting help on this site. Please see stackoverflow.com/help/how-to-ask — jub0bs
– jub0bs, Commented Oct 16, 2023 at 11:54
@jub0bs sorry, you're right, the error is Cross-origin request blocked: Origin match policy does not allow reading remote resource from expense-api.000webhostapp.com/api/login. Reason: CORS request failed. Status code: (null). — FrankSDA
– FrankSDA, Commented Oct 19, 2023 at 7:31

Nelson Ekpenyong · Accepted Answer · 2024-03-23 07:45:11Z

1

There's a file in your config directory called cors.php. In there, you may configure your settings for cross-origin resource sharing | or "CORS" as you please.

Let me share my own copy to guide you through it.

<?php

return [

/*
|--------------------------------------------------------------------------
| Cross-Origin Resource Sharing (CORS) Configuration
|--------------------------------------------------------------------------
|
| Here you may configure your settings for cross-origin resource sharing
| or "CORS". This determines what cross-origin operations may execute
| in web browsers. You are free to adjust these settings as needed.
|
| To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
|
*/

'paths' => ['api/*' , 'sanctum/csrf-cookie'],

'allowed_methods' => ['*'],

'allowed_origins' => [
    'your frontend/react/vue app URL here',
    'http://localhost:3000',
    '*'
],

'allowed_origins_patterns' => [],

'allowed_headers' => [':authority:', ':method:', ':path:', ':scheme:','*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => false,
];

This is would white list those URLs and solve your CORS problem.

answered Mar 23, 2024 at 7:45

Nelson Ekpenyong

7810 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chithra Over a year ago

I have verified the above two steps. But the issue is still there. Any idea?

Collectives™ on Stack Overflow

CORS issue with laravel 10

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related