CORS Issue with React app and Laravel API

Question

I have a React app which is at http://localhost:3000/ and Laravel API is at http://localhost/blog/public/api/
I get the following error

Access to fetch at 'http://localhost/blog/public/api/auth/signin' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Here are the response headers :-

I tried via htaccess, https://packagist.org/packages/barryvdh/laravel-cors

Answer 1

The below solution should fix the CORS related issue in Laravel.

Step1: Create a new middleware

php artisan make:middleware Cors

Step 2:

Put the below in the created middle to replace the handle method

public function handle($request, Closure $next) {
    return $next($request)
      ->header('Access-Control-Allow-Origin', '*')
      ->header('Access-Control-Allow-Methods', '*')
      ->header('Access-Control-Allow-Headers',' Origin, Content-Type, Accept, Authorization, X-Request-With')
      ->header('Access-Control-Allow-Credentials',' true');
}

Step 3:

Then go to Kernel.php file and add this under the The application's global HTTP middleware stack.

p.s. Only the last line with the comment was added, the other other lines exist before.

protected $middleware = [
\Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
\Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
\App\Http\Middleware\TrimStrings::class,
\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
\App\Http\Middleware\TrustProxies::class,
\App\Http\Middleware\Cors::class,//cors added here 
 ];

Enjoy!

Answer 2

Laravel 7 supports CORS out of the box through Barry's package

Otherwise install the package by using this composer require fruitcake/laravel-cors

Then publish the config php artisan vendor:publish --tag="cors"

Then modify it as needed.

Here's a working config (careful, this allows every request from other origin):

<?php

return [
    /*
    |--------------------------------------------------------------------------
    | Laravel CORS Options
    |--------------------------------------------------------------------------
    |
    | The allowed_methods and allowed_headers options are case-insensitive.
    |
    | You don't need to provide both allowed_origins and allowed_origins_patterns.
    | If one of the strings passed matches, it is considered a valid origin.
    |
    | If array('*') is provided to allowed_methods, allowed_origins or allowed_headers
    | all methods / origins / headers are allowed.
    |
    */

    /*
     * You can enable CORS for 1 or multiple paths.
     * Example: ['api/*']
     */
    'paths' => ['api/*'],

    /*
    * Matches the request method. `[*]` allows all methods.
    */
    'allowed_methods' => ['*'],

    /*
     * Matches the request origin. `[*]` allows all origins.
     */
    'allowed_origins' => ['*'],

    /*
     * Matches the request origin with, similar to `Request::is()`
     */
    'allowed_origins_patterns' => [],

    /*
     * Sets the Access-Control-Allow-Headers response header. `[*]` allows all headers.
     */
    'allowed_headers' => ['*'],

    /*
     * Sets the Access-Control-Expose-Headers response header.
     */
    'exposed_headers' => false,

    /*
     * Sets the Access-Control-Max-Age response header.
     */
    'max_age' => false,

    /*
     * Sets the Access-Control-Allow-Credentials header.
     */
    'supports_credentials' => true,
];

Answer 3

You can enable CORS inside react application itself if you are using CRA(create-react-app). You need to add setupProxy.js file in your src folder.

const proxy =  require("http-proxy-middleware");
module.exports = (app) => {
  app.use(
    "/api/",
    proxy({
      target: "https://target.com/",
      changeOrigin: true,
      pathRewrite: {
        "^/api/": "/"
      },
    })
  );
};

Answer 4

The error you're getting is due to CORS policy headers not being set on your resource (your Laravel API).
I see you know about barryvdh's cors package, could you please check if you've followed the installation process for that package ?

More specifically, having the following in your Http/Kernel.php file:

protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

or

protected $middlewareGroups = [
    'web' => [
       // ...
    ],

    'api' => [
        // ...
        \Barryvdh\Cors\HandleCors::class,
    ],
];

The first injects the middleware globally to your app, the second injects it to the api guard, if you have defined your api routes in routes/api.php it should work as well.

---

Additionally, you could try to publish the package's config with php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider" and change the allowed headers to 'allowedHeaders' => ['*'],

Answer 5

In Laravel to access API without CORS error then you need to add CORS PKG in your Laravel Project.

https://github.com/barryvdh/laravel-cors

You can use this to fix this error.

Answer 6

You try insert with attr enctype="multiple/form-data" when you create form

<form method="POST" role="form" enctype="multiple/form-data">
 <div class="form-group">
  <label for="">Username</label>
  <input type="text" class="form-control" id="" name="username" />
 </div>
 <input type="submit" class="btn btn-primary" value="Submit"/>
</form>